1. ProductFilter 컴포넌트

이 컴포넌트는 상품명, 카테고리, 가격 범위 등의 검색 조건을 선택해 화면에 보일 상품들의 목록을 변경하는 컴포넌트다.

렌더링 되는 요소로는 다음의 것들이 있다 :

• 상품명 텍스트 인풋
• 카테고리 선택 라디오 버튼
• 가격 범위 텍스트 인풋 (최소, 최대)

이 컴포넌트의 도메인은 무엇이 있을까? 즉 무엇을 검증해야 할까? (렌더링 여부는 다른 컴포넌트에서 다루기 때문에 함수의 호출 여부만 검증한다.)

• 상품명을 입력하면 그것이 적용 되는가?
• 카테고리를 클릭하면 카테고리 선택이 적용되는가?
  • 카테고리 선택 이전에 모든 카테고리가 제대로 렌더링 되는지부터 검증해야 한다.
• 가격 범위 설정이 적용 되는가?

이 컴포넌트는 위의 기능들을 다음과 같은 함수들로 구현하고 있다.
- setTitle
- setCategoryId
- setMinPrice 와 setMaxPrice

위의 함수들은 모두 useFilterStore 주스탠드 스토어 액션들이다. 그러면 우리는 useFilterStore를 모킹해야 함을 알 수 있다.
그리고 그 전에 확인해야 하는것이 있는데 바로 카테고리 목록을 가져오는 api useCategories에 대한 모킹이다.

api 모킹 - MSW

여기서 선택될 카테고리들의 목록은 useCategories 훅을 사용해 서버에서 가져온다.
(ProductFilter 내부의 CategoryRadioGroup 컴포넌트에서 사용중)

const useCategories = options =>
  useFetch({ url: pathToUrl(apiRoutes.categories), options });

원래라면 이 코드는 서버에서 데이터를 가져오겠지만, msw를 사용하면 대신src/__mocks__/handler.js 에 적힌대로 작동한다.
예제 코드에서는 src/__mocks__/response 에 작성한 json 파일을 불러와 전달하는것으로 되어있다.

// handler.js
import response from '@/__mocks__/response';
...
rest.get(`${API_DOMAIN}${path}`, (_, res, ctx) =>
      res(ctx.status(200), ctx.json(response[path])),
    ),
...

// response/categories.json
[
  {
    "creationAt": "2023-03-25T12:00:00.000Z",
    "id": 1,
    "image": "https://api.lorem.space/image/fashion",
    "name": "category1",
    "updatedAt": "2023-03-25T12:00:00.000Z"
  },
  ...

it('카테고리 목록을 가져온 후 카테고리 필드의 정보들이 올바르게 렌더링된다.', async () => {
  await render(<ProductFilter />);

  expect(await screen.findByLabelText('category1')).toBeInTheDocument();
  expect(await screen.findByLabelText('category2')).toBeInTheDocument();
  expect(await screen.findByLabelText('category3')).toBeInTheDocument();
});

위의 테스트를 실행하면 api가 json에 작성되어 있는대로 잘 가져온다는 것을 확인할 수 있다.

스토어 모킹

데이터 패칭 api가 작동하는 것을 검증했으니 이제 도메인들을 검증해야 한다.
테스트 방식은 모킹 함수를 toHaveBeenCalledWith() 매처로 확인하는 방식을 사용한다. (위에서도 설명했듯, 실제 화면에 렌더링 하는 컴포넌트는 다른 컴포넌트고 지금 진행하는 테스트의 범위를 벗어난다.)

beforeEach(() => {
  mockUseFilterStore({
    setMinPrice: setMinPriceFn,
    setMaxPrice: setMaxPriceFn,
    setTitle: setTitleFn,
  });
});

it('상품명을 수정하는 경우 setTitle 액션이 호출된다.', async () => {
  ...
  expect(setTitleFn).toHaveBeenCalledWith('test');
});

it('카테고리를 클릭 할 경우의 클릭한 카테고리가 체크된다.', async () => {
  ...
  expect(category3).toBeChecked();
});

it('최소 가격 또는 최대 가격을 수정하면 setMinPrice과 setMaxPrice 액션이 호출된다.', async () => {
  ...
  expect(setMinPriceFn).toHaveBeenCalledWith('1');
  ...
  expect(setMaxPriceFn).toHaveBeenCalledWith('2');
});