Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(docs) - Remove hoisting of mocked client in Jest tests (#1345)
authored by
Phil Pluckthun
and committed by
GitHub
27a88abb
cc6b5afe
+53
-47
+53
-47
docs/advanced/testing.md
+53
-47
docs/advanced/testing.md
···
39
39
import { never } from 'wonka';
40
40
import { MyComponent } from './MyComponent';
41
41
42
-
const mockClient = {
43
-
executeQuery: jest.fn(() => never),
44
-
executeMutation: jest.fn(() => never),
45
-
executeSubscription: jest.fn(() => never),
46
-
};
47
-
48
42
it('renders', () => {
43
+
const mockClient = {
44
+
executeQuery: jest.fn(() => never),
45
+
executeMutation: jest.fn(() => never),
46
+
executeSubscription: jest.fn(() => never),
47
+
};
48
+
49
49
const wrapper = mount(
50
50
<Provider value={mockClient}>
51
51
<MyComponent />
···
78
78
<MyComponent />
79
79
</Provider>
80
80
);
81
-
const variables = {
82
-
name: 'Carla',
83
-
};
81
+
82
+
const variables = { name: 'Carla' };
84
83
85
84
wrapper.find('input').simulate('change', { currentTarget: { value: variables.name } });
86
85
wrapper.find('button').simulate('click');
···
123
122
**Example snapshot test of response state**
124
123
125
124
```tsx
126
-
const responseState = {
127
-
executeQuery: () =>
128
-
fromValue({
129
-
data: {
130
-
posts: [
131
-
{ id: 1, title: 'Post title', content: 'This is a post' },
132
-
{ id: 3, title: 'Final post', content: 'Final post here' },
133
-
],
134
-
},
135
-
}),
136
-
};
137
-
138
125
it('matches snapshot', () => {
126
+
const responseState = {
127
+
executeQuery: () =>
128
+
fromValue({
129
+
data: {
130
+
posts: [
131
+
{ id: 1, title: 'Post title', content: 'This is a post' },
132
+
{ id: 3, title: 'Final post', content: 'Final post here' },
133
+
],
134
+
},
135
+
}),
136
+
};
137
+
139
138
const wrapper = mount(
140
139
<Provider value={responseState}>
141
140
<MyComponent />
···
167
166
Returning different values for many `useQuery` calls can be done by introducing conditionals into the mocked client functions.
168
167
169
168
```tsx
170
-
const mockClient = () => {
171
-
executeQuery: ({ query }) => {
172
-
if (query === GET_USERS) {
173
-
return fromValue(usersResponse);
174
-
}
169
+
let mockClient;
170
+
beforeEach(() => {
171
+
mockClient = () => {
172
+
executeQuery: ({ query }) => {
173
+
if (query === GET_USERS) {
174
+
return fromValue(usersResponse);
175
+
}
175
176
176
-
if (query === GET_POSTS) {
177
-
return fromValue(postsResponse);
178
-
}
177
+
if (query === GET_POSTS) {
178
+
return fromValue(postsResponse);
179
+
}
180
+
};
179
181
};
180
-
};
182
+
});
181
183
```
182
184
183
185
The above client we've created mocks all three operations — queries, mutations, and subscriptions — to always remain in the `fetching: true` state.
186
+
Generally when we're _hoisting_ our mocked client and reuse it across multiple tests we have to be
187
+
mindful not to instantiate the mocks outside of Jest's lifecycle functions (like `it`, `beforeEach`,
188
+
`beforeAll` and such) as it may otherwise reset our mocked functions' return values or
189
+
implementation.
184
190
185
191
## Subscriptions
186
192
···
193
199
```tsx
194
200
import { OperationContext, makeOperation } from '@urql/core';
195
201
196
-
const mockClient = {
197
-
executeSubscription: jest.fn(query =>
198
-
pipe(
199
-
interval(200),
200
-
map((i: number) => ({
201
-
// To mock a full result, we need to pass a mock operation back as well
202
-
operation: makeOperation('subscription', query, {} as OperationContext),
203
-
data: { posts: { id: i, title: 'Post title', content: 'This is a post' } },
204
-
}))
205
-
)
206
-
),
207
-
};
202
+
it('should update the list', done => {
203
+
const mockClient = {
204
+
executeSubscription: jest.fn(query =>
205
+
pipe(
206
+
interval(200),
207
+
map((i: number) => ({
208
+
// To mock a full result, we need to pass a mock operation back as well
209
+
operation: makeOperation('subscription', query, {} as OperationContext),
210
+
data: { posts: { id: i, title: 'Post title', content: 'This is a post' } },
211
+
}))
212
+
)
213
+
),
214
+
};
208
215
209
-
it('should update the list', done => {
210
216
let index = 0;
211
217
212
218
const wrapper = mount(
···
240
246
241
247
const { source: stream, next: pushResponse } = makeSubject();
242
248
243
-
const mockedClient = {
244
-
executeQuery: jest.fn(() => stream),
245
-
};
246
-
247
249
it('shows notification on updated data', () => {
250
+
const mockedClient = {
251
+
executeQuery: jest.fn(() => stream),
252
+
};
253
+
248
254
const wrapper = mount(
249
255
<Provider value={mockedClient}>
250
256
<MyComponent />