Jest 및 OpenAPI 목으로 React 테스트

Kent C. Dodds는 최근 React 애플리케이션을 테스트할 때 모킹 종료window.fetch를 요청하는very interesting post을 작성했습니다.






켄트 C. 도즈 🧑‍🚀










가져오기 모방 중지 테스트에서 가져오기 또는 API 클라이언트를 모방하면 안 되는 이유와 대신 수행할 작업. kentcdodds.com/blog/stop-mock…


오후 14:16 - 2020년 6월 9일





94

465



그는 옳았다.

저는 최근에 React 프로젝트를 가져오기 기반 API 클라이언트 구현에서 axios based one으로 마이그레이션해야 했습니다. 여기서 테스트는 조롱global.fetch에 크게 의존했습니다. 이것이 좋은 관행이 아닌 이유가 매우 빨리 명백해졌습니다.

가져오기 및 새 API 클라이언트를 조롱하는 자체 테스트 유틸리티를 작성해야 했습니다. 코드가 사용자를 위해 아무 것도 변경하지 않았다는 것을 증명하기 위해 테스트를 변경해야 할 때 결코 좋아 보이지 않습니다.

더 나은 대안으로 Kent는 Mock Service Worker를 사용할 것을 제안합니다. 보다 구체적으로 말하면 msw module 기본적으로 모의 백엔드를 모든 나가는 API 요청을 가로채서 처리하는 서비스 워커로 실행합니다.

msw 설정

React 테스트를 위해 msw로 모의 백엔드를 설정하는 것은 상당히 쉬운 프로세스로 밝혀졌습니다. 더 자세한 그림을 보려면 Kent's original post을 확인해야 합니다. 하지만 REST 끝점을 모의하기 위해 테스트 코드에서 실제로 수행해야 하는 모든 작업은 다음과 같습니다.

import { rest } from 'msw';
import { setupServer } from 'msw/node';

const server = setupServer(
  rest.get('/api/pets', (req, res, ctx) => {
    const pets = [{ id: 1, name: 'Garfield', type: 'cat' }];
    return res(ctx.json({ pets }));
  }),
);

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

이것이 매우 멋진 이유 중 하나는 테스트를 실행하는 호스트의 특정 포트에 바인딩해야 하는 익스프레스 서버와 같은 실제 로컬 모의 백엔드를 시작해야 하는 고통을 피하기 때문입니다.

이렇게 하면 테스트를 빠르고 간단하게 실행할 수 있습니다.

OpenAPI로 더욱 향상

(바라건대!) Swagger/OpenAPI 정의를 제공하는 API 백엔드로 많은 작업을 하는 사람으로서 저는 이미 openapi-backend 과 함께 OpenAPI 모의를 사용하여 React 테스트에서 백엔드를 조롱하고 있었습니다. msw 에 대해 알게 되었을 때 정말 기뻤습니다!
msw와 함께 openapi-backend는 REST api를 조롱하기 위한 완벽한 조합입니다.

API에 대한 전체 모의를 제공하려면 API 정의를 사용하여 openapi-backend로 모의 백엔드를 생성하고 msw에게 이를 사용하도록 지시하기만 하면 됩니다.

import { rest } from 'msw';
import { setupServer } from 'msw/node';
import OpenAPIBackend from 'openapi-backend';
import definition from 'path/to/definition.json';

// create our mock backend with openapi-backend
const api = new OpenAPIBackend({ definition });
api.register('notFound', (c, res, ctx) => res(ctx.status(404)));
api.register('notImplemented', async (c, res, ctx) => {
  const { status, mock } = await api.mockResponseForOperation(c.operation.operationId);
  return res(ctx.status(status), ctx.json(mock));
});

// tell msw to intercept all requests to api/* with our mock
const server = setupServer(
  rest.get('/api/*', (req, res, ctx) => api.handleRequest(req, res, ctx))
);

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

이제 각 작업에 대한 자체 모의 핸들러를 작성하지 않고 OpenAPI 문서에 정의된 응답 스키마 및 예제에서 생성됩니다.

또한 API 정의가 변경될 때마다 모든 모의가 자동으로 업데이트되어 앱이 새 API 버전과 호환된다는 확신을 가질 수 있습니다.

요청 검증 활성화

테스트할 때 애플리케이션이 실제로 API에 올바른 요청을 보내고 있는지 확인하는 것이 종종 매우 유용합니다.

OpenAPI 정의로 작업하면 API 작업이 잘 정의되고 JSON 스키마를 사용하여 요청을 자동으로 검증할 수 있다는 이점이 있습니다.

테스트 중에 요청 유효성 검사를 활성화하려면 openapi-backend에 대해 validationFail handler을 등록하기만 하면 됩니다.

api.register('validationFail', (c, res, ctx) => res(
  ctx.status(400),
  ctx.json({ error: c.validation.errors }),
));

테스트를 실행할 때 API 엔드포인트에 대한 잘못된 형식의 호출은 이제 모의 백엔드에서 400 Bad Request 오류를 발생시키고 요청의 문제점을 알려주는 유용한 오류 메시지와 함께 표시됩니다.

커스텀 핸들러

일부 테스트에서는 openapi-backend에서 제공하는 기본 모의와 다른 모의를 제공하는 것이 합리적일 수 있습니다.

테스트에서 API 작업에 대한 자신의 모의를 등록하는 것은 operationId 및 모의 핸들러를 사용하여 호출api.register()하는 것만큼 간단합니다.

it('should call getPets operation', () => {
  // given
  const mockResponse = [{ id: 2, name: 'Odie' }];
  const mockHandler = jest.fn((c, res, ctx) => res(ctx.json(mockResponse)));
  api.register('getPets', mockHandler);

  // when
  // render(<MyComponent />)...

  // then
  expect(mockHandler).toBeCalled();
});

결론

msw에 대해 알게 된 것은 내 React 테스트의 주요 게임 체인저였습니다. 이는 openapi-backend의 자동 모의 기능과 결합하여 React 테스트에서 모의 ​​API를 쉽게 만듭니다.

감사합니다, Kent, 팀mswjs/msw ! 💙