React 테스트 코드에서 Mocking 사용하기(1) - 백엔드 API 요청 모킹하기

jest.spyOn(window, "fetch").mockImplementation(() => {
	return Promise.resolve({
			json: () => Promise.resolve([
					{ id: 1, title: "Blog 1", author: "Author 1" },
					{ id: 2, title: "Blog 2", author: "Author 2" },
					{ id: 3, title: "Blog 3", author: "Author 3" },
			])
	})
});

# npm
npm install msw --save-dev

# yarn
yarn add msw --dev

import '@testing-library/jest-dom';
import { server } from './mocks/server.js'; // (1)

beforeAll(() => server.listen()); // (2)
afterEach(() => server.resetHandlers()); // (3)
afterAll(() => server.close()); // (4)

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

// 불러온 handler들을 통해 모킹 서버를 설정
export const server = setupServer(...handlers);

// src/mocks/handlers.js
import { rest } from 'msw';

export const handlers = [];

import { rest } from 'msw';

export const handlers = [
	rest.get('실제 API 요청 주소', (req, res, ctx) => { // 요청 경로, 메서드
		return res(); // 응답값
	})
]

import { rest } from 'msw';

export const handlers = [
	  rest.get('실제 API 요청 주소', (req, res, ctx) => {

    return res(
      ctx.status(200), // 상태 코드
      ctx.json(...), // 응답 데이터
    );
  }),
];

import { rest } from 'msw';

export const handlers = [
	rest.get('/board', (req, res, ctx) => {
    return res(
			// 상태 코드를 명시하지 않으면, 200으로 들어옴
      ctx.json([{
				id: 1,
				title: 'test board'
			},{
				id: 2,
				title: 'test board2'
			}]),
    );
  }),

	rest.post('/board', (req, res, ctx) => {
    return res(
      ctx.status(500),
			ctx.json({
				errorMessage: 'Invalid Input',
			}),
    );
  }),

	rest.post('/comment', (req, res, ctx) => {
    return res(
      ctx.status(201), // 데이터 없이 상태값만 받는것도 가능
    );
  }),
];

import React, { useEffect, useState } from 'react';

export default function TodoList() {
  const [todoList, setTodoList] = useState([]);
  const [errorMsg, setErrorMsg] = useState('');

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((res) => res.json())
      .then((json) => setTodoList(json))
      .catch(() => setErrorMsg('에러 발생'));
  }, []);

  return (
    <>
      <h1>Todo</h1>
      {errorMsg ? (
        <p>{errorMsg}</p>
      ) : (
        <ul>
          {todoList.map((todo) => (
            <li
              key={todo.id}
              style={{ textDecoration: todo.completed ? 'line-through' : undefined }}
            >
              {todo.title}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

import { rest } from 'msw';

export const handlers = [
  rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        {
          id: 1,
          title: '청소',
          completed: true,
        },
        {
          id: 2,
          title: '설거지',
          completed: false,
        },
        {
          id: 3,
          title: '숙제',
          completed: true,
        },
      ]),
    );
  }),
];

describe('Todo list', () => {
  it('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });
});

describe('Todo list', () => {
  test('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });

  test('에러 발생 시 에러 메세지를 보여준다.', async () => {
    server.use(
      rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
        return res(ctx.status(200));
      }),
    );
    render(<TodoList />);
    const error = await screen.findByText('에러 발생');
    expect(error).toBeInTheDocument();
  });
});

describe('Todo list', () => {
  test('에러 발생 시 에러 메세지를 보여준다.', async () => {
    server.use(
      rest.get('https://jsonplaceholder.typicode.com/todos', (req, res, ctx) => {
        return res(ctx.status(200));
      }),
    );
    render(<TodoList />);
    const error = await screen.findByText('에러 발생');
    expect(error).toBeInTheDocument();
  });

	test('리스트가 잘 나온다. (3개)', async () => {
    render(<TodoList />);
    const list = await screen.findAllByRole('listitem');
    expect(list).toHaveLength(3);
  });
});

import { rest } from 'msw';

export const handlers = [
  rest.post('/login', (req, res, ctx) => {
    return res(
      ctx.cookie('auth-token', 'abc-123'),
    )
  }),
];

import { rest } from 'msw';

export const handlers = [
  rest.get('/products', (req, res, ctx) => {
    const productId = req.url.searchParams.get('id')
    return res(
      ctx.json({
        productId,
      }),
    )
  }),
];

{
  "productId": "123"
}

import { rest } from 'msw';

export const handlers = [
  rest.get('https://api.github.com/users/:username', async (req, res, ctx) => {
    const originalResponse = await ctx.fetch(req)
    const originalResponseData = await originalResponse.json()

    return res(
      ctx.json({
        location: originalResponseData.location,
        firstName: 'Not the real first name',
      }),
    )
  }),
];

{
  "location": "San Francisco",
  "firstName": "Not the real first name"
}