React Testing - Mocking

Mocking Function

• prop으로 함수를 받는 경우에 사용할수 있다.

const handler = jest.fn()

render(<Example onClick={handler}/>)

• 아무런 기능을 하지 않는 함수를 Mocking하고 prop 으로 전달할수 있다.
• expect(handler).toHaveBeenCalledTimes(횟수) 로 함수가 몇번 호출되었는지 테스트할수 있다!

Mocking HTTP Request

• http request 를 가지는 컴포넌트를 테스트한다.
• 실제 http request 는 많이 진행되어야 하는 unit test 특성상 계속 불러올수 없기에 이를 mocking 한다.

Mock service worker

• 실제 request 를 가로채 Mocking 해준다.

setup

1. msw 설치하기
   v1 을 사용해야 아래와 동일하게 설정 가능합니다.

npm install msw --save-dev

yarn add msw --dev

2. src 폴더에 mocks 폴더를 만들고 server.ts 에 아래와 같이 작성한다.

import { setupServer } from 'msw/node';
import handlers from './handlers';

export default setupServer(...handlers);

3. mocks 폴더에 handler.ts 를 만들어 http request 를 정의한다.
   • handlers는 정의한 request들의 배열이다.

import { rest } from 'msw';

export default [
    rest.get(
        'api주소',
        (req, res, ctx) => {
            const { equalTo } = req.params;
            if (equalTo === '"testid"') {
                return res(
                    ctx.status(200),
                    ctx.json({ key: { id: 'test1', name: 'test' } })
                );
            } else {
                return res(ctx.status(200), ctx.json({}));
            }
        }
    ),
];
//json 뒤에 보낼 내용과 상태코드.
//res는 반드시 리턴해야 한다!!!

• rest api 통신을 mocking 한다.

usage

1. setupTests.ts 파일에 아래 코드를 추가한다.

import server from './mocks/server';

beforeAll(() => server.listen());

afterEach(() => server.resetHandlers());

afterAll(() => server.close());

• 테스트 전에 서버를 켜고, 테스트 할때마다 핸들러를 리셋하고, 끝나면 서버를 닫는다.

Error handling

• 각 테스트마다 특정한 핸들러를 직접 지정할수 있다.
  
• server.use 이후 핸들러를 불러온다.
• 이후 render 하면 된다.
• 각 테스트 이후 핸들러를 리셋하기에 여기에 핸들러가 있어도 다음 테스트에선 사라지게 된다.