Vitest와 MSW를 통합하는 React 애플리케이션 테스트

최신 React 애플리케이션을 테스트하는 방법에 대한 진행 중인 시리즈의 다섯 번째 부분입니다. 이번에는 MSW를 단위 테스트 프레임워크인 Vitest과 통합하는 방법을 살펴보겠습니다. 대부분의 애플리케이션은 백엔드 서버에서 데이터를 가져와야 합니다. 전체 범위를 확보하려면 이러한 요청을 조롱해야 합니다. 그런데 조롱이란 무엇입니까?

Make a replica or imitation of something

옥스포드 언어

아이디어는 백엔드에서 들어오는 요청의 모방을 만드는 것입니다. 여기에는 고유한 이점이 있습니다. 더 많은 시나리오를 테스트하기 위해 원하는 응답을 직접 조작할 수 있습니다. 이전에 만든 앱에서 게시물 0개, 게시물 100개, 텍스트가 없는 게시물 등을 가져오는 테스트를 할 수 있었습니다.

문제의 앱:



이것은 매우 강력합니다! 일반적인 사용 사례 또는 사용자가 마주칠 수 있는 엣지 사례를 테스트할 수 있습니다. 그리고 결국 가장 중요한 것은 테스트에 대한 자신감입니다.

MSW는 무엇입니까?

MSW은 사용이 매우 간단한 조롱 라이브러리입니다.

Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.

일반적으로 예상되는 상호 작용은 다음과 같습니다.



그러나 MSW가 추가됨에 따라 새로운 단계가 추가됩니다.



대박! 😎 우리의 애플리케이션으로 이 설정을 해봅시다. 참고로 here is the project 지금까지 사용하고 있습니다.

MSW용 구성 파일

먼저 새 라이브러리를 설치해 보겠습니다.

npm install msw --save-dev yarn add msw --dev

우리의 src 디렉토리에서 요청에 대한 핸들러를 보관할 이전 모의 객체를 생성해 봅시다. MSW 팀은 이를 모의 정의라고 합니다. mocks 폴더 안에 handlers.js를 만듭니다.

여기에서 핸들러 함수를 내보낼 수 있습니다. 정상적인 REST 요청을 수행하고 있으므로 MSW에서 나머지를 가져오겠습니다.

import { rest } from 'msw';

MSW가 요청을 인식하려면 정확한 메서드와 경로를 제공하고 배열에서 내보내야 합니다.

export const handlers = [
    rest.get('https://jsonplaceholder.typicode.com/posts', null), 
];

여기서 우리는 MSW가 우리에게 반환되기를 실제로 원하는 것으로 null을 대체할 수 있습니다. 이것은 응답 리졸버로 알려진 기능입니다. 다음을 반환합니다.

req, 매칭 요청에 대한 정보;

res, 모의 응답을 생성하는 기능적 유틸리티;

모의 응답의 상태 코드, 헤더, 본문 등을 설정하는 데 도움이 되는 함수 그룹인 ctx.

이 게시물에 대한 맞춤형 응답을 반환해 보겠습니다.

import { rest } from 'msw';

export const handlers = [
 rest.get('[https://jsonplaceholder.typicode.com/posts'](https://jsonplaceholder.typicode.com/posts'), (req, res, ctx) => {
  return res(
   ctx.status(200),
   ctx.json([
    {
     body: 'This is a body',
     id: 1,
     title: 'Title',
     userId: 1,
    },
   ])
  );
 }),
];

자, 이제 MSW 🚀에 대한 핸들러를 설정했습니다.

Vitest용 구성 파일

MSW는 우리가 요청을 가로채도록 서버를 설정합니다. 하지만 우리는 서버의 인스턴스를 만들어야 합니다. mocks 폴더에 server.js 파일을 만듭니다.

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

// Here we import the handler created!
export const server = setupServer(...handlers);

vite.config.js에서 테스트 개체의 설정 파일에 대한 항목을 추가할 수 있습니다.

setupFiles: ['./src/setup.js'],

src 디렉토리에 이 setup.js 파일을 생성해 봅시다. 이것은 모든 테스트 실행으로 서버를 올바르게 재설정하기 위한 것입니다.

import { server } from './mocks/server';

beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));
afterAll(() => server.close());
afterEach(() => server.resetHandlers());

이제 모든 준비가 완료되었으며 테스트할 준비가 되었습니다! **Vitest ** 테스트에서 이를 구현해 보겠습니다.

Vitest에서 API 요청 조롱

테스트 파일을 수정해 보겠습니다.

import React from 'react';
import {
 render,
 screen,
 waitForElementToBeRemoved,
} from '[@testing](http://twitter.com/testing)-library/react';
import userEvent from '[@testing](http://twitter.com/testing)-library/user-event';
import App from './App';

describe('Testing our React application', () => {
 it('Fetch posts', async () => {
  render(<App />);

expect(screen.getByText(/Modern React Testing/i)).toBeDefined();

userEvent.click(screen.getByRole('button', { name: 'Fetch Posts' }));

await waitForElementToBeRemoved(() =>
   screen.queryByLabelText('loading')
  );

expect(screen.getByRole('heading', { level: 3 })).toBeDefined();
 });
});

더 이상 필요하지 않으므로 @testing-library/jest-dom에 대한 라이브러리를 제거했습니다. 그러나 이제 우리의 테스트는 녹색으로 통과해야 합니다!



또한 테스트가 노드 환경에서 실행되기 때문에 원본 App.jsx에서 가져오기 기능을 폴리필해야 합니다.

npm install cross-fetch

맨 위에 가져오기만 하면 됩니다.

import fetch from 'cross-fetch';

사이드노트

제 다른 글을 따라오셨다면 제가 @testing-library/user-event라는 종속성 버전을 변경했음을 눈치채셨을 것입니다. 버튼 클릭을 실행하는 데 문제가 있었습니다.

13.5.0으로 다운그레이드하고 userEvent에서 직접 클릭 이벤트를 호출했습니다.

여기에서 전체 프로젝트를 찾을 수 있습니다repository with the updated list of dependencies.

마무리

이제 단위 테스트를 계속 생성하면서 요청을 모의 처리할 수 있는 강력한 도구가 생겼습니다! 다음 기사에서는 Cypress.io를 설정하는 방법을 살펴보겠습니다.

자세한 내용은 Relatable Code에서 확인하세요.

이 내용이 마음에 드셨다면 언제든지 저에게 연락하거나

내newsletter에서 내 무료 개발자 로드맵과 주간 기술 산업 뉴스를 확인하십시오.