문제

문제를 상세히 기록합니다.

환경

• Windows 10

설명

테스트시 테스트 코드를 jest가 해석하지 못해서 생기는 오류

해결 과정

관련 이슈가 twin.macro github에 있었다.

https://github.com/ben-rogerson/twin.macro/issues/147

이슈가 발생하는 것을 알고 twin.macro 개발자가 **Twin + Jest + React Testing Library + TypeScript** example을 만들어서 링크를 걸어뒀다.

해결 방법은 jest가 코드를 실행하기전 babel로 코드를 전처리하는 것이다.

하지만, 우리 프로젝트에서는 react만 사용하고 next를 사용하기 때문에 다음과 같이 jest.config를 수정해도 next를 설치해야했다.

const nextJest = require('next/jest')

const babelConfigEmotion = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: [
    require.resolve('babel-plugin-macros'),
    require.resolve('@emotion/babel-plugin'),
  ],
}

/** @type {import('ts-jest').JestConfigWithTsJest} */
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  transform: {
    '^.+\\\\.(js|jsx|ts|tsx|mjs)$': ['babel-jest', babelConfigEmotion],
  },
}

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

module.exports = createJestConfig(customJestConfig)