From cbbbd1835e44f5ae8448bff27ed922fc7d2f936c Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Thu, 26 Oct 2023 15:48:35 +0200 Subject: [PATCH 1/4] Update MSW usage in "example-intro" --- docs/react-testing-library/example-intro.mdx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 5344fc006..5002b936f 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -67,15 +67,15 @@ See the following sections for a detailed breakdown of the test ```jsx title="__tests__/fetch.test.jsx" import React from 'react' -import {rest} from 'msw' +import {httpm, 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 +96,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 }) }), ) @@ -127,7 +127,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 +156,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 +176,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 }) }), ) From 0efe64422b627b6beecbbf1fd6936d2d9f6e6d41 Mon Sep 17 00:00:00 2001 From: Artem Zakharchenko Date: Thu, 16 Nov 2023 19:03:17 +0100 Subject: [PATCH 2/4] Update docs/react-testing-library/example-intro.mdx Co-authored-by: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> --- docs/react-testing-library/example-intro.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index 5002b936f..b9ed5aa38 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -67,7 +67,7 @@ See the following sections for a detailed breakdown of the test ```jsx title="__tests__/fetch.test.jsx" import React from 'react' -import {httpm, HttpResponse} 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' From 8b990d92bc9c79bb4f4c6d2a8c570a71b8a9eb7e Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Thu, 4 Apr 2024 17:44:39 +0300 Subject: [PATCH 3/4] fix note --- docs/react-testing-library/example-intro.mdx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index b9ed5aa38..c74a86255 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -65,6 +65,13 @@ 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 {http, HttpResponse} from 'msw' @@ -97,7 +104,7 @@ test('loads and displays greeting', async () => { test('handles server error', async () => { server.use( http.get('/greeting', () => { - return new HttpResponse(null, { status: 500 }) + return new HttpResponse(null, {status: 500}) }), ) @@ -112,10 +119,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 @@ -177,7 +180,7 @@ test('handles server error', async () => { // override the initial "GET /greeting" request handler // to return a 500 Server Error http.get('/greeting', (req, res, ctx) => { - return new HttpResponse(null, { status: 500 }) + return new HttpResponse(null, {status: 500}) }), ) From 002e8aac748669e72279cc0d5f1807d5c3af06c6 Mon Sep 17 00:00:00 2001 From: Matan Borenkraout Date: Thu, 4 Apr 2024 17:49:41 +0300 Subject: [PATCH 4/4] fix formatting --- docs/react-testing-library/example-intro.mdx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/react-testing-library/example-intro.mdx b/docs/react-testing-library/example-intro.mdx index c74a86255..72ffb6600 100644 --- a/docs/react-testing-library/example-intro.mdx +++ b/docs/react-testing-library/example-intro.mdx @@ -65,12 +65,14 @@ test('loads and displays greeting', async () => { See the following sections for a detailed breakdown of the test -:::note We recommend using the +:::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. ::: +MSW requires Node.js 18 or later. +::: ```jsx title="__tests__/fetch.test.jsx" import React from 'react'