레벨 테스트 작업 로그 #7 - 모킹에 모킹을 더해서 (22.12.05 TIL)

백엔드는 테스트 오류 메세지는 이제 익숙해졌고, 오류가 나면 '아, 이걸 안해줬네!' 하고 떠올릴 수 있게 되었지만 프론트 테스트는 일단은 오류가 나면 하나씩 모킹해주면서 오류를 하나씩 줄여나가는 식으로 하고 있다. 

결국에는 통과되긴 했지만 통과된 최종 코드를 보니까 관련되어 있는 함수나 객체는 다 모킹해준 식이었다. 코드를 짜면서 어디서부터 어디까지 모킹해줘야 하는 지 한 눈에 알면 좋을텐데 이게 모킹을 해주어야 해결되는 오류인지, 코드를 잘못 짠 건지, 오타가 난 건지 헷갈릴 때가 있다. 이미지를 모킹해주고, 관련 객체와 함수를 모킹해주니 테스트가 통과되었다.

import { render, screen, waitFor, } from '@testing-library/react';
import ProductDetailPage from './ProductDetailPage';

const navigate = jest.fn();

jest.mock('../assets', () => ({
  iconImages: {
    icons: {
      minusBlack: 'MinusBlack.png',
      minusGray: 'MinusGray.png',
      plusBlack: 'PlusBlack.png',
    },
  },
}));

jest.mock('react-router-dom', () => ({
  useNavigate() {
    return navigate;
  },
  useParams: () => ({
    id: '1',
  }),
}));

jest.mock('../hooks/useProductStore', () => () => ({
  product: {
    id: 1,
    price: 1000,
    name: 'sofa',
    maker: 'brand',
    description: 'this is sofa',
    imageUrl: '...',
  },
  resetProductState: jest.fn(),
  fetchProduct: jest.fn(),
  totalPrice: jest.fn(),
}));

describe('ProductDetailPage', () => {
  it('상품 상세 페이지', async () => {
    render(
      <ProductDetailPage />,
    );

    await waitFor(() => {
      screen.getByText(/선물하기/);
    });
  });
});

 그런데 배너 이미지가 들어있는 ProductBanner 테스트에서는 이미지를 모킹해주지 않아도 통과가 되었는데, 이유가 무엇인지,,,내일의 액션플랜으로 알아보기로 하자.