Mock Service -React Testing lib — MSW | React unit testing

Mock Service -React Testing lib — MSW | React unit testing

Simulating API Response in Tests(React)

Anil Verma's photo
Anil Verma
·Jan 22, 2022·

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Problem- How to simulate API response in react unit testing.

Solution- While doing unit testing, we do not call real Api’s but we mock API responses. there are many ways to mock/test API response but one of the most reliable and better way is the use of the MSW(Mock Service Worker) package.

Let's do API testing in React

Step -1

  1. Create React app using CRA
  2. Install Axios (npm i axios)
  3. Install MSW(npm install msw — save-dev)

Step -2 Update setupTests.js as below

import '@testing-library/jest-dom';
import {server} from './mocks/server.js'
// Establish API mocking before all tests.
beforeAll(() => server.listen())
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())
// Clean up after the tests are finished.
afterAll(() => server.close())

Step -3 Create a Page where API will be called(Post page)

import {useEffect, useState} from "react";
import axios from "axios";
import Post from "../../components/post/Post";
const Posts = () => {
useEffect(() => getAllPosts(), []);
const [posts, setPosts] = useState([]);
const [error, setError] = useState(null);
const getAllPosts = async () => {
try {
const res = await axios.get("");
catch (e) {
return (
{error && <div>Error Occured!</div>}
{!error && (
<div className="row" data-testid="posts">
{posts.length > 0 && => <Post key={} post={post} />)}
export default Posts;

Step -4

Create a folder named Mocs inside src and create below js files inside it

  • errorHandler.js
  • handler.js
  • post.response.js
  • server.js

errorHandler.js(Will intercept error handling or API failing case)

import {rest} from 'msw';
export const errorHandlers = [
rest.get('', (req, res, ctx) => {
return res(
ctx.json({success: false, message: 'Error Occured!!!!'}),

handler.js(Will intercept API Success case)

import {rest} from 'msw';
import {posts} from './post.response'
export const handlers = [
rest.get('', (req, res, ctx) => {
return res(

post.response.js(Mocked Data)

export const posts = [
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"

server.js (This is the main file that has control, which means this file will decide which file(error or success case) needs to serve when

as default I am serving here success case(handlers.js)

import {setupServer} from 'msw/node'
import {handlers} from './handlers'
export const server = setupServer(...handlers)

Now Setup is ready, Let's perform unit testing

Create a post.spec.ts file

import {render, screen} from '@testing-library/react';
import Posts from './Posts';
import {posts} from '../../mocks/post.response'
import {server} from '../../mocks/server
import {errorHandlers} from '../../mocks/errorHandler'
// test api success case
test('get post data', async () => {
render(<Posts />);
const title = posts[0].title;
const linkElement = await screen.findByText(title);
// test api error case
test('show error if api fails', async () => {
// as default success response is served from handler.js but for error case we have to mock errorHandlers.js file
//server.use method provide mechanism to switch response
render(<Posts />);
const errorMessage = await screen.findByText(/Error Occured!/i)

This is all for doing unit testing for API in react using MSW.

Happy Learning…👏👏👏

Share this