Skip to content

Commit f977452

Browse files
committed
docs: replace "axiosMock" with "msw" in React Testing Library example
1 parent fc2c2ea commit f977452

File tree

1 file changed

+30
-18
lines changed

1 file changed

+30
-18
lines changed

docs/react-testing-library/example-intro.md

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -11,27 +11,29 @@ See the following sections for a detailed breakdown of the test
1111
```jsx
1212
// __tests__/fetch.test.js
1313
import React from 'react'
14+
import { rest } from 'msw'
15+
import { setupServer } from 'msw/node'
1416
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
1517
import '@testing-library/jest-dom/extend-expect'
16-
import axiosMock from 'axios'
1718
import Fetch from '../fetch'
1819

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())
2028

2129
test('loads and displays greeting', async () => {
2230
const url = '/greeting'
2331
render(<Fetch url={url} />)
2432

25-
axiosMock.get.mockResolvedValueOnce({
26-
data: { greeting: 'hello there' },
27-
})
28-
2933
fireEvent.click(screen.getByText('Load Greeting'))
3034

3135
await waitFor(() => screen.getByRole('heading'))
3236

33-
expect(axiosMock.get).toHaveBeenCalledTimes(1)
34-
expect(axiosMock.get).toHaveBeenCalledWith(url)
3537
expect(screen.getByRole('heading')).toHaveTextContent('hello there')
3638
expect(screen.getByRole('button')).toHaveAttribute('disabled')
3739
})
@@ -47,17 +49,32 @@ test('loads and displays greeting', async () => {
4749
// import dependencies
4850
import React from 'react'
4951

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+
5057
// import react-testing methods
5158
import { render, fireEvent, waitFor, screen } from '@testing-library/react'
5259

5360
// add custom jest matchers from jest-dom
5461
import '@testing-library/jest-dom/extend-expect'
55-
import axiosMock from 'axios'
5662
// the component to test
5763
import Fetch from '../fetch'
5864

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())
6178
```
6279

6380
```jsx
@@ -70,7 +87,8 @@ test('loads and displays greeting', async () => {
7087

7188
### Arrange
7289

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.
7492

7593
```jsx
7694
const url = '/greeting'
@@ -83,10 +101,6 @@ The [`fireEvent`](dom-testing-library/api-events.md) method allows you to fire
83101
events to simulate user actions.
84102

85103
```jsx
86-
axiosMock.get.mockResolvedValueOnce({
87-
data: { greeting: 'hello there' },
88-
})
89-
90104
fireEvent.click(screen.getByText('Load Greeting'))
91105

92106
// Wait until the mocked `get` request promise resolves and
@@ -133,8 +147,6 @@ export default function Fetch({ url }) {
133147
```
134148

135149
```jsx
136-
expect(axiosMock.get).toHaveBeenCalledTimes(1)
137-
expect(axiosMock.get).toHaveBeenCalledWith(url)
138150
expect(screen.getByRole('heading')).toHaveTextContent('hello there')
139151
expect(screen.getByRole('button')).toHaveAttribute('disabled')
140152

0 commit comments

Comments
 (0)