[Issue] jest에서 Icon 컴포넌트를 랜더하지 못하는 이슈

[L2HYUNN]

📣 이슈 내용

• jest에서 Icon 컴포넌트를 사용하지 못하는 문제가 있습니다.

✏️ 상세 설명

jest에서 Icon 컴포넌트를 사용하지 못하는 문제가 있습니다.

• 다음의 사진과 같이 Icon 컴포넌트를 랜더하지 못하고 있습니다.
• jest에서 svg를 컴포넌트로 사용하기 위해 @svgr/webpack를 사용할 때 svg가 기본적으로 매핑되는 방식이 이미지 object 형태이기 때문에 발생하는 문제로 보입니다.
• 아래의 참고 자료를 해결하여 여러 방법을 시도해보았지만 해결되지 않아 이슈로 남깁니다.

시도한 방법

1. SVGR에서 제공하는 Jest 설정 추가

2. vercel/next.js#42535 참고하여 jest.config.js 수정

해결

• 기존의 jest.cofig.js를 다음과 같이 변경하였습니다.

// 변경 전
/* eslint-disable-next-line @typescript-eslint/no-var-requires */
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^~/(.*)$': '<rootDir>/src/$1',
    '\\.svg$': '<rootDir>/__mocks__/svg.js',
  },
  testEnvironment: 'jest-environment-jsdom',
  testPathIgnorePatterns: ['<rootDir>/src/__tests__/utils/*'],
};

module.exports = createJestConfig(customJestConfig);

// 변경 후
/* eslint-disable @typescript-eslint/no-var-requires */
const nextJest = require('next/jest');

const createJestConfig = nextJest({
  dir: './',
});

const jestConfig = async () => {
  const nextJestConfig = await createJestConfig()();
  return {
    ...nextJestConfig,
    setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
    testEnvironment: 'jest-environment-jsdom',
    moduleNameMapper: {
      '^~/(.*)$': '<rootDir>/src/$1',
      '\\.svg$': '<rootDir>/__mocks__/svg.js',
    },
    testPathIgnorePatterns: ['<rootDir>/src/__tests__/utils/*'],
  };
};

module.exports = jestConfig;

🧑🏻‍💻 할 일

• jest에서 발생하는 svg 문제 해결하기
• 시도한 방법 업데이트하기

📁 참고 자료

• Try to test component with React generated form svgr gregberge/svgr#83 (comment)
• Next/Jest : Cannot override transformIgnorePatterns vercel/next.js#35634 (comment)
• 간단한 리팩토링 + 테스팅 환경 구축 nextunicorn-inc/front-onboarding-program#31
• feat: 나라 선택 검색어 입력시 리스트 필터링을 적용하라 mbti-nf-team/offbeat-frontend#24 (comment)
• [React Testing Library] SVG 파일을 인식하지 못하여 SyntaxError가 발생할 때
• Jest cannot load svg file
• nextjs-jest-svg