NextJS 테스트 코드 작성하기 - NextJS 테스트를 위한 모듈 설치 및 설정

Rust 컴파일러에서 Jest 설치 방법

Next.js 12 릴리스부터 Next.js에는 이제 Jest를 위한 구성이 기본으로 제공됩니다.

Jest를 설정하려면 jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom을 설치하세요:

yarn add jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom -D 

내부적으로 next/jest는 다음을 포함하여 자동으로 Jest를 구성합니다:

• SWC를 사용한 트랜스폼 설정
• 스타일시트(. css,. module.css 및 해당 scss 변형), 이미지 import 및 next/font 자동 mocking
• . env(및 모든 변형)를 process.env에 로드하기
• 테스트 resolving 및 트랜스폼에서 node_modules 무시하기
• 테스트 resolving에서 .next 무시하기
• SWC 트랜스폼을 활성화하는 플래그를 위해 next.config.js 로드하기

jest.config.js 작성

저는 스타일 작업을 위해 tailwind, tailwind macro, styled-components를 함께 사용하고 있습니다. 그래서 jest를 사용할 때도 위 3개의 라이브러리가 모두 호환되도록 nextjs 공식 문서에 있는 Jest and React Testing Library를 기반으로 별도의 환경 설정 코드를 추가합니다. 별도의 환경 설정 코드는 twin.examples/jest-testing-typescript를 참고했습니다.

// jest.config.js
const nextJest = require("next/jest");

/**
* jest에서 tailwind macro와 styled-components를 사용하기 위한 babel환경 설정 
*/
const babelConfigStyledComponents = {
  presets: [["next/babel", { "preset-react": { runtime: "automatic" } }]],
  plugins: [
    "babel-plugin-macros",
    ["babel-plugin-styled-components", { ssr: true }],
  ],
};

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: "./",
});

// Add any custom config to be passed to Jest
const customJestConfig = {
//커스텀 매처로 Jest 확장 
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testEnvironment: "jest-environment-jsdom",
  moduleNameMapper: {
    "^@/components/(.*)$": "<rootDir>/src/components/$1",
    "^@/styles/(.*)$": "<rootDir>/src/styles/$1",
    "^@/pages/(.*)$": "<rootDir>/src/pages/$1",
    "^@/app/(.*)$": "<rootDir>/src/app/$1",
    "^@/lib/(.*)$": "<rootDir>/src/lib/$1",
  },
  transform: {
    "^.+\\.(js|jsx|ts|tsx|mjs)$": ["babel-jest", babelConfigStyledComponents],
  },
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

이 코드는 Jest를 사용하여 Next.js 프로젝트를 테스트하기 위한 Jest 구성 파일(jest.config.js)의 내용을 보여줍니다. 이 구성 파일은 Next.js 애플리케이션을 테스트할 때 필요한 여러 설정을 구성합니다.

1. next/jest 모듈을 가져옵니다.
   const nextJest = require("next/jest");
next/jest 모듈은 Next.js 애플리케이션을 Jest에서 테스트하기 위한 기본 구성을 제공합니다.
2. babelConfigStyledComponents 변수를 정의합니다.
   이 변수에는 Jest에서 tailwind macro와 styled-components를 사용하기 위한 Babel 설정이 들어 있습니다. babelConfigStyledComponents는 다음과 같은 구성을 갖고 있습니다:
   • Next.js Babel 프리셋을 설정하고 React 프리셋을 자동으로 사용하도록 지정합니다.
   • babel-plugin-macros를 활성화합니다. 이 플러그인은 매크로 사용을 지원합니다.
   • babel-plugin-styled-components를 활성화합니다. 이 플러그인은 styled-components를 서버 및 클라이언트 측에서 사용할 수 있도록 해줍니다.
3. createJestConfig 함수를 호출하여 Jest 구성을 생성합니다.
   const createJestConfig = nextJest({
   dir: "./", // Next.js 앱의 경로를 지정합니다.
});
   이 함수는 Next.js 프로젝트의 디렉토리 경로를 제공하여 next.config.js 및 .env 파일을 테스트 환경에서 로드할 수 있도록 합니다.
4. customJestConfig 객체를 정의합니다.
   이 객체에는 사용자 정의 Jest 구성 옵션들이 포함되어 있습니다. 여기에는 다음과 같은 설정이 있습니다:
   • setupFilesAfterEnv: Jest 환경 설정 파일인 jest.setup.js 파일을 로드합니다.
   • jest.setup.js 파일 안에는 커스텀 매처로 Jest 확장을 하는 testing-library/jest-dom 같은 라이브러리를 import 할 수 있습니다. 이는 테스트를 더 쉽게 작성할 수 있도록. toBeInTheDocument()와 같은 편리한 사용자 정의 일치자 집합이 포함되어 있습니다. Jest 구성 파일에 다음 옵션을 추가하여 모든 테스트에 대해 사용자 정의 일치자를 가져올 수 있습니다.
   • testEnvironment: Jest 테스트 환경을 jest-environment-jsdom으로 설정합니다. 이는 DOM 환경에서 테스트를 실행하도록 합니다.
   • moduleNameMapper: 모듈 이름을 실제 파일 경로로 매핑합니다. 예를 들어, @/components/는 src/components/로 매핑됩니다.
   • transform: 코드 변환 프로세스를 설정합니다. 기본적으로 next/jest는 swc jest 트랜스포머를 사용하지만 여기서는 babel-jest로 재정의합니다. babel로 바꾸는 이유는 tailwind macro가 바벨 환경 내에서 기능을 제공하기 때문입니다. JavaScript와 JSX 파일에 대해서는 Babel과 함께 babel-jest를 사용하고, 이때 babelConfigStyledComponents 설정을 적용합니다.
5. module.exports를 사용하여 Jest 구성을 내보냅니다.
   module.exports = createJestConfig(customJestConfig);
   이렇게 구성 파일을 내보내면 Jest가 해당 설정을 인식하고 Next.js 애플리케이션을 효과적으로 테스트할 수 있게 됩니다

이 구성 파일은 Next.js 프로젝트에서 Jest를 설정하고 사용하기 위한 필수적인 단계를 구현한 것입니다. 특히 styled-components와 tailwind macro와 같은 CSS-in-JS 라이브러리를 사용할 때 필요한 설정을 포함하고 있습니다.

jest.setup.js 작성

// jest.setup.js
// Learn more: https://github.com/testing-library/jest-dom

import "@testing-library/jest-dom";

jest.setup.js 파일은 Jest 설정 파일에서 설정 파일로 로드되는 파일입니다. 이 파일은 Jest 테스트 스위트 전체에 대한 공통 설정을 포함하는 데 사용됩니다.

위 코드에서는 @testing-library/jest-dom 패키지를 가져오고 이를 설정 파일에 추가하는 역할을 합니다. 이 패키지는 Jest를 사용하여 DOM 요소에 대한 테스트를 작성할 때 유용한 확장 기능을 제공합니다. 주로 다음과 같은 기능을 포함합니다:

1. toBeInTheDocument: 요소가 DOM에 있는지 확인하는 메서드.
2. toHaveTextContent: 요소의 텍스트 내용을 확인하는 메서드.
3. toHaveAttribute: 요소의 속성을 확인하는 메서드.
4. 기타 다양한 메서드와 기능들은 공식 문서를 참고해주세요

이런 기능들을 사용하면 Jest 테스트에서 DOM 요소를 더 쉽게 검증할 수 있으며, 테스트 코드의 가독성과 유지 관리성을 향상할 수 있습니다.

또한 각 테스트 전에 설정 옵션을 더 추가해야 하는 경우, 위의 jest.setup.js 파일에 추가하는 것이 일반적입니다.