kitten.sh / urql
Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

Enhance testing page (#695)

* Improve doc about mocking the urql client

* remove repetition

* add subscription 's section

* spelling fix

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

* Update docs/advanced/testing.md

Co-Authored-By: Phil Plückthun <phil@kitten.sh>

Co-authored-by: Phil Plückthun <phil@kitten.sh>

authored by

Matthew
Phil Plückthun and committed by
GitHub 52273660 f232ca10

+61 -5
+61 -5
docs/advanced/testing.md
··· 21 21 - `useMutation` calls `executeMutation` 22 22 - `useSubscription` calls `executeSubscription` 23 23 24 + In the section [Stream Patterns](../concepts/stream-patterns.md) we've seen, that all methods on the client operate with and return streams. These streams are created using the `wonka` library and we're able to create streams ourselves to mock the different states of our operations, e.g. fetching, errors, or success with data. 25 + 26 + You'll probably use one of these utility functions to create streams: 27 + 28 + - `never`: This stream doesn’t emit any values and never completes, which puts our `urql` code in a permanent `fetching: true` state. 29 + - `fromValue`: This utility function accepts a value and emits it immediately, which we can use to mock a result from the server. 30 + - `makeSubject`: Allows us to create a source and imperatively push responses, which is useful to test subscription and simulate changes, i.e. multiple states. 31 + 32 + Creating a mock `Client` is pretty quick as we'll create an object that contains the `Client`'s methods that the React `urql` hooks use. We'll mock the appropriate `execute` functions that we need to mock a set of hooks. After we've created the mock `Client` we can wrap components with the `Provider` from `urql` and pass it. 33 + 24 34 Here's an example client mock being used while testing a component. 25 35 26 36 ```tsx 27 37 import { mount } from 'enzyme'; 28 38 import { Provider } from 'urql'; 39 + import { never } from 'wonka'; 29 40 import { MyComponent } from './MyComponent'; 30 41 31 42 const mockClient = { 32 - executeQuery: jest.fn(), 33 - executeMutation: jest.fn(), 34 - executeSubscription: jest.fn(), 43 + executeQuery: jest.fn(() => never), 44 + executeMutation: jest.fn(() => never), 45 + executeSubscription: jest.fn(() => never), 35 46 }; 36 47 37 48 it('renders', () => { ··· 169 180 }; 170 181 ``` 171 182 183 + The above client we've created mocks all three operations — queries, mutations, and subscriptions — to always remain in the `fetching: true` state. 184 + 185 + ## Subscriptions 186 + 187 + Testing subscriptions can be done by simulating the arrival of new data over time. To do this we may use the `interval` utility from `wonka`, which emits values on a timer, and for each value we can map over the response that we'd like to mock. 188 + 189 + If you prefer to have more control on when the new data is arriving you can use the `makeSubject` utility from `wonka`. You can see more details in the next section. 190 + 191 + Here's an example of testing a list component which uses a subscription. 192 + 193 + ```tsx 194 + const mockClient = { 195 + executeSubscription: jest.fn(query => 196 + pipe( 197 + interval(200), 198 + map((i: number) => ({ 199 + // To mock a full result, we need to pass a mock operation back as well 200 + operation: { 201 + operationName: 'subscription, 202 + context: {}, 203 + ...query, 204 + }, 205 + data: { posts: { id: i, title: 'Post title', content: 'This is a post' } }, 206 + })) 207 + ) 208 + ), 209 + }; 210 + 211 + it('should update the list', done => { 212 + let index = 0; 213 + 214 + const wrapper = mount( 215 + <Provider value={mockClient}> 216 + <MyComponent /> 217 + </Provider> 218 + ); 219 + 220 + setTimeout(() => { 221 + expect(wrapper.find('.list').children()).toHaveLength(index + 1); // See how many items are in the list 222 + index++; 223 + if (index === 2) done(); 224 + }, 200); 225 + }); 226 + ``` 227 + 172 228 ## Simulating changes 173 229 174 230 Simulating multiple responses can be useful, particularly testing `useEffect` calls dependent on changing query responses. ··· 184 240 import { makeSubject } from 'wonka'; 185 241 import { MyComponent } from './MyComponent'; 186 242 187 - const [stream, pushResponse] = makeSubject(); 243 + const { source: stream, next: pushResponse } = makeSubject(); 188 244 189 245 const mockedClient = { 190 - executeQuery: () => stream, 246 + executeQuery: jest.fn(() => stream), 191 247 }; 192 248 193 249 it('shows notification on updated data', () => {