@@ -11,27 +11,29 @@ See the following sections for a detailed breakdown of the test
11
11
``` jsx
12
12
// __tests__/fetch.test.js
13
13
import React from ' react'
14
+ import { rest } from ' msw'
15
+ import { setupServer } from ' msw/node'
14
16
import { render , fireEvent , waitFor , screen } from ' @testing-library/react'
15
17
import ' @testing-library/jest-dom/extend-expect'
16
- import axiosMock from ' axios'
17
18
import Fetch from ' ../fetch'
18
19
19
- jest .mock (' axios' )
20
+ const server = setupServer (
21
+ rest .get (' /greeting' , (req , res , ctx ) => {
22
+ return res (ctx .json ({ greeting: ' hello there' }))
23
+ })
24
+ )
25
+
26
+ beforeAll (() => server .listen ())
27
+ afterAll (() => server .close ())
20
28
21
29
test (' loads and displays greeting' , async () => {
22
30
const url = ' /greeting'
23
31
render (< Fetch url= {url} / > )
24
32
25
- axiosMock .get .mockResolvedValueOnce ({
26
- data: { greeting: ' hello there' },
27
- })
28
-
29
33
fireEvent .click (screen .getByText (' Load Greeting' ))
30
34
31
35
await waitFor (() => screen .getByRole (' heading' ))
32
36
33
- expect (axiosMock .get ).toHaveBeenCalledTimes (1 )
34
- expect (axiosMock .get ).toHaveBeenCalledWith (url)
35
37
expect (screen .getByRole (' heading' )).toHaveTextContent (' hello there' )
36
38
expect (screen .getByRole (' button' )).toHaveAttribute (' disabled' )
37
39
})
@@ -47,17 +49,32 @@ test('loads and displays greeting', async () => {
47
49
// import dependencies
48
50
import React from ' react'
49
51
52
+ // import API mocking utilities from Mock Service Worker
53
+ // (see https://github.com/mswjs/msw)
54
+ import { rest } from ' msw'
55
+ import { setupServer } from ' msw/node'
56
+
50
57
// import react-testing methods
51
58
import { render , fireEvent , waitFor , screen } from ' @testing-library/react'
52
59
53
60
// add custom jest matchers from jest-dom
54
61
import ' @testing-library/jest-dom/extend-expect'
55
- import axiosMock from ' axios'
56
62
// the component to test
57
63
import Fetch from ' ../fetch'
58
64
59
- // https://jestjs.io/docs/en/mock-functions#mocking-modules
60
- jest .mock (' axios' )
65
+ // declare which API requests to mock
66
+ const server = setupServer (
67
+ // capture "GET /greeting" requests
68
+ rest .get (' /greeting' , (req , res , ctx ) => {
69
+ // respond using a mocked JSON body
70
+ return res (ctx .json ({ greeting: ' hello there' }))
71
+ })
72
+ )
73
+
74
+ // establish API mocking before all tests
75
+ // and clean up once the tests are finished
76
+ beforeAll (() => server .listen ())
77
+ afterAll (() => server .close ())
61
78
```
62
79
63
80
``` jsx
@@ -70,7 +87,8 @@ test('loads and displays greeting', async () => {
70
87
71
88
### Arrange
72
89
73
- The [ ` render ` ] ( ./api#render ) method renders a React element into the DOM and returns utility functions for testing the component.
90
+ The [ ` render ` ] ( ./api#render ) method renders a React element into the DOM and
91
+ returns utility functions for testing the component.
74
92
75
93
``` jsx
76
94
const url = ' /greeting'
@@ -83,10 +101,6 @@ The [`fireEvent`](dom-testing-library/api-events.md) method allows you to fire
83
101
events to simulate user actions.
84
102
85
103
``` jsx
86
- axiosMock .get .mockResolvedValueOnce ({
87
- data: { greeting: ' hello there' },
88
- })
89
-
90
104
fireEvent .click (screen .getByText (' Load Greeting' ))
91
105
92
106
// Wait until the mocked `get` request promise resolves and
@@ -133,8 +147,6 @@ export default function Fetch({ url }) {
133
147
```
134
148
135
149
``` jsx
136
- expect (axiosMock .get ).toHaveBeenCalledTimes (1 )
137
- expect (axiosMock .get ).toHaveBeenCalledWith (url)
138
150
expect (screen .getByRole (' heading' )).toHaveTextContent (' hello there' )
139
151
expect (screen .getByRole (' button' )).toHaveAttribute (' disabled' )
140
152
0 commit comments