Skip to content

Commit e77ec68

Browse files
committed
docs: explain the usage of msw
1 parent 444203e commit e77ec68

File tree

1 file changed

+16
-9
lines changed

1 file changed

+16
-9
lines changed

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ test('loads and displays greeting', async () => {
4040
```
4141

4242
> We recommend using [Mock Service Worker](https://github.com/mswjs/msw) library
43-
> to declaratively mock API communication in your tests, instead of stubbing
43+
> to declaratively mock API communication in your tests instead of stubbing
4444
> `window.fetch`, or relying on third-party adapters.
4545
4646
---
@@ -64,7 +64,22 @@ import { render, fireEvent, waitFor, screen } from '@testing-library/react'
6464
import '@testing-library/jest-dom/extend-expect'
6565
// the component to test
6666
import Fetch from '../fetch'
67+
```
68+
69+
```jsx
70+
test('loads and displays greeting', async () => {
71+
// Arrange
72+
// Act
73+
// Assert
74+
})
75+
```
76+
77+
### Mock
6778

79+
Use the `setupServer` function from `msw` to mock an API request that our tested
80+
component makes.
81+
82+
```js
6883
// declare which API requests to mock
6984
const server = setupServer(
7085
// capture "GET /greeting" requests
@@ -80,14 +95,6 @@ beforeAll(() => server.listen())
8095
afterAll(() => server.close())
8196
```
8297

83-
```jsx
84-
test('loads and displays greeting', async () => {
85-
// Arrange
86-
// Act
87-
// Assert
88-
})
89-
```
90-
9198
### Arrange
9299

93100
The [`render`](./api#render) method renders a React element into the DOM and

0 commit comments

Comments
 (0)