NextJS에서 유닛테스트하기: Jest & react-testing-library (NextJS React 프로젝트 08)

 

오늘은 NextJS 프로젝트에 유닛테스트를 위해

Jest와 react-testing-library를 설치해보려고 합니다!

 

※ 유닛테스트, Jest, react-testing-library 가 무엇인지, 그냥 React에서 어떻게 사용하는지 궁금하다면 이전 글을 참조해주세요!

 

 

1. Jest 설치하기

우선 jest를 설치합니다.

yarn add jest // or npm install jest

 

※ 타입스크립트를  사용하신다면 코드 에디터의 지원을 받기 위해 @types/jest 를 설치하시는 것을 추천합니다.

yarn add --dev @types/jest

 

만약 이후 바로 테스트를 추가한다면 ES6 이상의 문법이나 typescript는 사용하지 못할 것입니다.

왜냐하면 jest가 commonJS 기반으로 작동하기 때문인데요,

그렇기에 관련해서 babel 설정을 해줘야합니다!

 

하지만 다행인 것은 next가 babel 관련된 설정을 많이 간소화해주었기 때문에,

저희는 파일 하나에 한 줄의 코드만 추가하면 됩니다.

 

루트 디렉토리에 babel.config.js 파일을 생성하고 아래 내용을 추가할게요.

그럼 next/babel 설정이 es6 이상의 문법과 타입스크립트도 읽을 수 있도록 해줍니다.

// babel.config.js
module.exports = {
  presets: ["next/babel"],
}

 

 

2. Jest로 자바스크립트/타입스크립트 테스트하기

이제 테스트하기 위해 예시 파일을 만들어보겠습니다. 

테스트파일은 .test.* 형식으로 작성하시면 됩니다!

// calculator.ts
export const add = (a: number, b: number) => {
  return a + b
}

// calculator.test.ts
import { add } from "./calculator"

it("add correctly", () => {
  expect(add(3, 5)).toBe(8)
})

 

그리고 테스트를 작동할 수 있도록 package.json에 명령어를 하나 추가합니다.

// package.json
{
  ...,
  "scripts": {
    "test": "jest"
  },
  ...
}

 

그 후, 방금 추가한 test 스크립트를 실행합니다.

yarn test // or npm run test

 

잘 통과되는 것을 볼 수 있죠?

만약 toBe에 7을 넣고 실패한다면 어떻게 될까요?

 

그럼 어떤 값때문에 실패했는지 보여줍니다!

 

 

3. react-testing-library 설치하기

우선 필요한 패키지들을 설치합니다.

yarn add --dev @testing-library/jest-dom @testing-library/react
// or npm install -D @testing-library/jest-dom @testing-library/react

 

※ 예전에는 react-testing-library와 jest-dom 을 사용했는데 이제는 @testing-library/react와 @testing-library/jest-dom 으로 변경되었습니다.

 

그리고 루트 디렉토리에 setupTests.js 파일을 생성해서 아래 내용을 추가해 줍니다.

// setupTests.js
import '@testing-library/jest-dom';

 

 

4. react-testing-library로 컴포넌트 테스트하기

테스트를 해보기위한 컴포넌트를 만들어보겠습니다.

저는 이름과 mbti를 담은 Account라는 컴포넌트를 만들었습니다.

// Account.tsx
const Account = (props: { name: string; mbti: string }) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.mbti}</p>
    </div>
  )
}

export default Account

 

그리고 해당 컴포넌트를 테스트하기 위한 Account.test.tsx 파일을 만들어볼게요.

import Account from "./Account"
import { render } from "@testing-library/react"

it("matches snapshot", () => {
  const utils = render(<Account name="호박너구리" mbti="ESFJ" />)
  expect(utils.container).toMatchSnapshot()
})

 

테스트 과정에서 toMatchSnapshot이 실행되면, __snapshots__/Account.test.tsx.snap 이라는 파일이 만들어집니다.

나중에 렌더되는 내용이 바뀌면 에러를 보내주는 방식이죠.

 

※ 스냅샷 위치 이동하기

그런데 저는 컴포넌트 위치에 스냅샷 파일이 생기는 것이 파일구조를 복잡하게 만드는 것 같아서 따로 모아두고 싶었습니다.

그래서 스냅샷 생성 위치를 이동했는데 해당 방법은 포스트를 참조해주세요.

 

 

※ 컴포넌트 테스트 중, css import 관련해서 에러가 발생한다면?

identity-obj-proxy 패키지를 설치해줍니다.

yarn add --dev identity-obj-proxy // or npm install -D identity-obj-proxy

 

그리고 루트 디렉토리에 jest.config.js 파일을 생성하고 다음과 같이 입력해줍니다.

module.exports = {
  moduleNameMapper: {
    "\\.(css|less|scss|sass)$": "identity-obj-proxy",
  }
}