설마 아직도 테스트 코드를 작성 안 하시나요?

테스트 코드의 작성과 TDD의 중요성

• 예상치 못한 오류를 발견할 수 있습니다.
• 의도대도 작동하는지 검증할 수 있습니다
• 코드 변경으로 인한 영향도를 파악 가능합니다.
• 이에 코드 변경에 대한 사이드 이펙트를 줄여줍니다.

이번 기회를 통해 테스트 코드의 사용법을 알고 적용해보며 제대로된 사용법에 대해서 알아보겠습니다.
(이전에는 컴포넌트 렌더링에 파라미터 관련 이슈로 넘어갔었는데, 제대로 확인해보기)

테스트 코드 작성

1. 프로젝트 시작 및 설치

회원가입과 로그인 기능이 구현되어 있는 react 프로젝트를 통해 테스트의 종류와 사용 방법에 대해서 알아보겠습니다.

• Next 13
• Jest
• Testing Library (E2E 테스트용)
• npm install -D jest jest-environment-jsdom @testing-library/jest-dom @testing-library/react @testing-library/user-event

2. 설정 파일 생성

jest 구성을 위한 파일들을 생성해줍니다.

jest.config.js

const nextJest = require('next/jest')
const createJestConfig = nextJest({
  dir: './',
})

const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  moduleNameMapper: {
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
  testEnvironment: 'jest-environment-jsdom',
}

module.exports = createJestConfig(customJestConfig)

jest.setup.js

import '@testing-library/jest-dom/extend-expect'
import "./__mocks__/routerMock"; // 아래 파일

mocks/routerMock.tsx
구성 요소에서 useRouter 를 사용하는 경우 'next/router' 를 모의로 처리해야 합니다.

import * as ReactTesting from '@testing-library/react'

jest.mock('next/router', () => ({
  push: jest.fn(),
  back: jest.fn(),
  events: {
    on: jest.fn(),
    off: jest.fn(),
  },
  beforePopState: jest.fn(() => null),
  useRouter: () => ({
    push: jest.fn(),
  }),
}))

3. 테스트 실행 스크립트 추가

package.json

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "jest --watch",
  "test:ci": "jest --ci"
}

4. 테스트 코드 작성

각 폴더에서 파일을 만들어서 하게되면, snapshots 폴더가 각 폴더에 만들어져서.. 저는 tests 폴더에서 스냅샷 테스트를 해보겠습니다.

tests/snapshot/main.tsx

import MainPage from "@/pages";
import { render } from "@testing-library/react";

it("renders correctly", () => {
  const { container } = render(<MainPage />);
  expect(container).toMatchSnapshot();
});

5. 실행

npm test 를 통해 실행시키게 되면
자동으로 .test.js 파일이나 .spec.js 파일이나 __tests__ 디렉터리를 찾아서 테스트 파일로 인식합니다.

6.tsconfig 설정

절대 경로를 사용하기 위해서 사용합니다.
config 파일에서 절대 경로를 설정하고, jest.config.js에서 사용하면 됩니다.

  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@pages/*": ["pages/*"],
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"],
      "@hooks/*": ["hooks/*"],
      "@types/*": ["types/*"]
    },
      //...
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]

세팅은 끝났고 다음 시간 부터 직접 테스팅 코드를 작성해보도록 하겠습니다~ 🤚