NextJs 와 TypeScript 환경에서 Jest , React-Testing-Library 셋팅하기 (삽질오지게함...)

 

업무를 보면서 현재 진행 중인 프로젝트의 코드를 조금 더 개선시키고 앞으로의 작업을 편하게 가져가기 위해서 어떤 일들을 할 수 있을까? 하는 생각을 하다가 테스트 코드 셋팅을 해보자라는 다짐을 하게 되었다. 현재 진행 중인 코드에서는 할 수 없기 때문에 비슷한 환경을 조성한 테스트 코드를 가지고 시험 삼아서 테스트 개발환경을 조성하려고 시도했다. 웬걸? 삽질을 이틀 사흘 동안 하고 끝냈다. 하지만 여전히 미궁에 빠져있고 이걸 다시 재연해낼 수 있을까? 하는 의문이 강하게 들어서 다급하게 이곳에 남겨보려고 한다. 

 

맨날 듣기만하고 여기저기 구글링 하다가 보기만 했지. 정작 써본 적은 없는 테스트 코드. 여러 블로그를 참고해서 진행을 했었는데, 뭐하나 제대로 이해하는 게 없으니 코드는 완전 짬뽕이 되고 test는 되지도 않고 그래서 잘 모르겠으면 뭐다? 공식문서를 보자. 

 

• https://nextjs.org/docs/testing#jest-and-react-testing-library

Testing | Next.js

- Quick Start 부터 보시면 됩니다! 천천히 읽어보시고 차근차근 시도해보면 된다. 당연히 머리에서는 쥐가 날 것이다. 

 

 

여기서 시작해서 오류가 난다면 그 오류들을 하나하나씩 헤쳐나가자라고 생각했다. 쉽지 않다. 

 

 

 

필요한 패키지 설치하기

엄청 많은 패키지들이 필요하다. 일단  jest를 nextjs 와 사용하기 위한 것도 필요하고 typescript 와도 컴파일이 되어야 하기 때문에 그에 대한 연관 패키지들도 설치해줘야 한다.

 

npm install @testing-library/dom @testing-library/jest-dom @testing-library/react 
@testing-library/user-event babel-jest jest jest-dom ts-jest ts-loader

 

✔️ 리액트 컴포넌트를 가상 브라우저에서 테스트하기 위한 기능을 제공하는 @testing-library 패키지들,

✔️ babel-jest는 테스트 코드를 변환하고 컴파일한다.

✔️ ts-jest, ts-loader 는 Jest에서 타입스크립트 기반의 코드를 테스트할 수 있게 해 준다. 

 

테스트가 가능한 상태의 package.json devDependencies

% API routes 테스트를 위해서는 node-mocks-http 라는 것도 설치. 아직 전 그 단계까지 못해서 우선 위의 정도만 해놓은 상황. node-mocks-http는 Next API routes를 테스트할 때 필요한 request, response 객체의 mock을 생성해 준다.

 

 

 

추가해야 할  설정 파일들

• tsconfig.json

CNA에 타입스크립트를 더해서 사용했다면 이미 생성되어있을 파일로 path라는 값만 더해주면 된다. 테스트 코드 적을 시에 path를 일일이 적지 않아도 import 할 수 있게 해 준다.

{
  "compilerOptions" : {
      .....
      "path" : {
        '@components/*': ["components/*"],
        "@pages/*": ["pages/*"],
        "@styles/*":["hooks/*"]
      }
  }
}

 

 

• jest.config.json
  공식문서에 보시면 디폴트로 나와있는 형식. 하지만 css import 같은 경우에 mocks가 없다면 지우고, css도 필요하시면 폴더 만들고 파일 만들어서 쓰면 된다. 나는 필요 없어서 싹 지워내고, page와 components만 남겼다

// jest.config.json

module.exports = {
  collectCoverageFrom: [
    "**/*.{js,jsx,ts,tsx}",
    "!**/*.d.ts",
    "!**/node_modules/**"
  ],
  moduleNameMapper: {
    // Handle CSS imports (with CSS modules)
    // https://jestjs.io/docs/webpack#mocking-css-modules
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",

    // Handle CSS imports (without CSS modules)
    "^.+\\.(css|sass|scss)$": "<rootDir>/styles/__mocks__/styleMock.js",

    // Handle image imports
    // https://jestjs.io/docs/webpack#handling-static-assets
    "^.+\\.(jpg|jpeg|png|gif|webp|avif|svg)$": `<rootDir>/__mocks__/fileMock.js`,

    // Handle module aliases
    "^@pages/(.*)$": "<rootDir>/pages/$1",
    "^@components/(.*)$": "<rootDir>/components/$1"
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
  testEnvironment: "jsdom",
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    "^.+\\.(js|jsx|ts|tsx)$": ["babel-jest", { presets: ["next/babel"] }]
  },
  transformIgnorePatterns: ["/node_modules/", "^.+\\.module\\.(css|sass|scss)$"]
};

 

• jest.setup.js

위에 있는 항목 중에 이 파일을 적은 곳이 있습니다. 테스트 실행하기 전에 반드시 세팅해야 하는 파일입니다. 역시나 공식문서에서 확인할 수 있다. 크게 할 겉 없고, import만 해주면 오키도키

import '@testing-library/jest-dom/extend-expect'

 

• package.json

"test" : "jest"

 

 

테스트하기

테스트를 위한 폴더를 하나 만들어주자!

__test__ 폴더 안에 api , components, page 등 또 폴더를 나눠도 되고 그냥 테스트하고 싶은 파일을 바로 써도 된다.

 

역시나 테스트 코드 작성에 대한 부분도 공식문서에서 볼 수 있다. 여기에도 정해진 룰이 있어서 사실 테스트 코드를 작성하는 것도 일이다. 익숙해지기가 쉽지 않다. 나 역시 단순히 특정 파일에 텍스트가 있는지를 확인해주는 테스트 코드를 썼다. 

 

// __test__/index.test.tsx

import { render, screen } from "@testing-library/react";
import Home from "@pages/index"; 

describe('Home', () => {
  it("render some text", () => {
   const { container } = render(<Home />);

    const home = screen.getByText('Home');

    expect(home).toBeInTheDocument();
    expect(container).toMatchSnapshot();
  });
});

 

 

 

 

테스트 코드를 다 작성했다면? 터미널에 적어보자! 

npm test

 

 

 

"어?!" 금지인 개발자 사무실에서 "어!!!!!!!!"를 외치게 한 순간 

 

 

이렇게 pass가 되기까지 많은 시간이 걸렸다. 그동안 테스트 코드에 대해 많은 글들을 읽었다. 읽으면서 유닛 테스트라고 하면 어디까지인가와 현업에서 어디까지 어떻게 테스트해야 하는 걸까?라는 생각이 들었다. 단순하게 버튼 로딩되는 것만으로 테스트했다고 할 수 있을까? 유닛 테스트라는 게 정말 그런 브라우저 환경의 작은 단위를 말하는 것인가? 그것은 아니다. 당당하게 이런 테스트 코드를 작성해보자고 제안하고 싶었는데 어디까지 테스트를 진행해야 하는 가에 대한 의문과 또 다른 미팅을 가져올 것 같은 생각에 주춤된다. 

 

 

 

 

참고자료들

설치부터 - pass 받기 전까지 험난했던 오류들을 만나서 serching 했던 기록들이다

• https://stackoverflow.com/questions/71713405/cannot-find-module-react-dom-client-from-node-modules-testing-library-react
• https://yoonho-devlog.tistory.com/177
• https://yeoulcoding.me/244
• https://yoonho-devlog.tistory.com/175