diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 5344fc006..72ffb6600 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -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. +::: + ```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'}) }), ) @@ -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}) }), ) @@ -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 @@ -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 @@ -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'}) }), ) @@ -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}) }), )