Skip to content

docs: udpate msw example #1378

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 19 additions & 14 deletions docs/react-testing-library/example-intro.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -65,17 +65,26 @@ test('loads and displays greeting', async () => {

See the following sections for a detailed breakdown of the test

:::note
We recommend using the
[Mock Service Worker (MSW)](https://github.com/mswjs/msw) library to
declaratively mock API communication in your tests instead of stubbing
`window.fetch`, or relying on third-party adapters.

MSW requires Node.js 18 or later.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a reminder that we can remove this once v10 is released.

:::

```jsx title="__tests__/fetch.test.jsx"
import React from 'react'
import {rest} from 'msw'
import {http, HttpResponse} from 'msw'
import {setupServer} from 'msw/node'
import {render, fireEvent, screen} from '@testing-library/react'
import '@testing-library/jest-dom'
import Fetch from '../fetch'

const server = setupServer(
rest.get('/greeting', (req, res, ctx) => {
return res(ctx.json({greeting: 'hello there'}))
http.get('/greeting', () => {
return HttpResponse.json({greeting: 'hello there'})
}),
)

Expand All @@ -96,8 +105,8 @@ test('loads and displays greeting', async () => {

test('handles server error', async () => {
server.use(
rest.get('/greeting', (req, res, ctx) => {
return res(ctx.status(500))
http.get('/greeting', () => {
return new HttpResponse(null, {status: 500})
}),
)

Expand All @@ -112,10 +121,6 @@ test('handles server error', async () => {
})
```

> We recommend using [Mock Service Worker](https://github.com/mswjs/msw) library
> to declaratively mock API communication in your tests instead of stubbing
> `window.fetch`, or relying on third-party adapters.

---

## Step-By-Step
Expand All @@ -127,7 +132,7 @@ test('handles server error', async () => {
import React from 'react'

// import API mocking utilities from Mock Service Worker
import {rest} from 'msw'
import {http, HttpResponse} from 'msw'
import {setupServer} from 'msw/node'

// import react-testing methods
Expand Down Expand Up @@ -156,9 +161,9 @@ component makes.
// declare which API requests to mock
const server = setupServer(
// capture "GET /greeting" requests
rest.get('/greeting', (req, res, ctx) => {
http.get('/greeting', (req, res, ctx) => {
// respond using a mocked JSON body
return res(ctx.json({greeting: 'hello there'}))
return HttpResponse.json({greeting: 'hello there'})
}),
)

Expand All @@ -176,8 +181,8 @@ test('handles server error', async () => {
server.use(
// override the initial "GET /greeting" request handler
// to return a 500 Server Error
rest.get('/greeting', (req, res, ctx) => {
return res(ctx.status(500))
http.get('/greeting', (req, res, ctx) => {
return new HttpResponse(null, {status: 500})
}),
)

Expand Down