이번엔 Mock Service Worker라이브러리를 이용해 api 모킹을 조금 더 간편하게 해볼것이다. 그리고 반복되는 render코드가 있다면 역시나 반복을 줄이는 법을 배워볼 것이다.

Mock HTTP calls using Fetch or Axios - Mock Service Worker

Mock Service Worker(MSW)는 api 를 모킹할때 사용하는 라이브러리이다. 이걸 사용하면 axios든 fetch든 간단하게 모킹 할 수 있다.

HTTP call을 모킹하는 것이기에 axios든 fetch든 다른 api 라이브러리를 사용하든 상관이 없다.

https://www.youtube.com/watch?v=oMv2eAGWtZU 참고해보길

custom render

global state(redux, contextAPI 를 통해 프로젝트 전역에 STATE를 dispatch하는것을 뜻함) 를 사용해야할때 주로 사용하는 기법이다. 이런게 있다는 것만 일단 알아두자!

// customRender.js
import React from 'react';
import { render } from '@testing-library/react';
import { ThemeProvider } from 'my-ui-lib';
import { TranslationProvider } from 'my-i18n-lib';
import defaultStrings from 'i18n/en-x-default';

const AllTheProviders = ({ children }) => {
  return (
    <ThemeProvider theme="light">
      <TranslationProvider messages={defaultStrings}>
        {children}
      </TranslationProvider>
    </ThemeProvider>
  );
};

const customRender = (ui, options) =>
  render(ui, { wrapper: AllTheProviders, ...options });

export { customRender };

// a.test.js
import { customRender } from './customRender';

it('custom render', () => {
  customRender(<someComponent />);
});

이렇게 하면 themeProvider,TranslationProvider로 someComponent를 테스트마다 일일이 감싸지 않아도 된다!