[ 살펴보기 ] Jest - Configuration

Project에서 jest를 통해 test를 실행될 때 여러 설정값을 관리하는 configuration file은 jest.config.js 파일을 생성해 설정한다. ( extension은 ts, mjs, cjs, json이여도 무관하다. )

이전 포스트에서 실행한 jest의 configuration은 다음과 같았다.

jest.config.mjs

/** @type {import('jest').Config} */
const config = {
  testEnvironment: "jsdom",
  transform: {
    "^.+.tsx?$": ["ts-jest", {}],
  },
};

export default config;

jest에서 설정할 수 있는 property는 위의 예제외에도 다양하며 아래에선 그 중 일부를 살펴본다. configuration에 사용할 수 있는 모든 property는 documentation을 통해 확인할 수 있다. ( Reference - Configuring Jest )

• testEnvironment : test code를 실행할 때 사용되는 환경을 설정한다. default는 node이며 frontend code를 테스트한다면 test code에서도 dom property에 접근할 수 있어야 하므로 jsdom과 같은 test용 dom을 제공하는 환경을 사용한다.

    /** @type {import('jest').Config} */
    const config = {
      testEnvironment: "jsdom",
    };
  
    export default config;
  

• transform : Jest는 default로 일반 javascript syntax를 실행할 수 있으므로 JSX 또는 typescript code와 같이 일반 javascirpt syntax가 아닌 code를 test하기 위해선 해당 코드를 일반 javascript로 변환 시켜주는 transpiler를 transform property를 통해 설정해주어야 한다. 아래의 예제는 ts-jest를 통해 .ts 또는 .tsx file code를 jest가 실행할 수 있는 code로 transpile 해주고 있다. Default transform 값은 다음과 같다. transform:{"\\.[jt]sx?$": "babel-jest"}

    /** @type {import('jest').Config} */
    const config = {
      transform: {
        "^.+.tsx?$": ["ts-jest", {}],
      },
    };
  
    export default config;
  

• automock : test code에서 import하는 module을 자동으로 mock을 적용할 것인지 설정한다. default value는 false다. 예를들어 이전 포스트에서 axios module에 mock을 적용하는 방법을 살펴보았다.

    import axios from "axios";
  
    jest.mock("axios");
  
    const getUserList = async () => {
      const result = await axios.get("example.com/users");
      return result.data;
    };
  
    test("test getUserList", async () => {
      ...
    });
  

  만약 automock을 true로 설정하면 다음과 같이 jest.mock(‘axios’)를 생략해도 test code에서 import하고 있는 module인 axios에 mock이 자동으로 적용된다.

    /** @type {import('jest').Config} */
    const config = {
      ...
      automock: true,
    };
  
    export default config;
  

    import axios from "axios";
  
    const getUserList = async () => {
      const result = await axios.get("example.com/users");
      return result.data;
    };
  
    test("test getUserList", async () => {
      ...
    });
  

• collectCoverage : test를 진행하며 coverage 정보를 수집하여 생성할 것인지 여부를 설정한다. default는 false이며 true로 설정시 test code의 실행 속도가 느려질 수 있다.

    /** @type {import('jest').Config} */
    const config = {
      ...
      collectCoverage: true,
    };
  
    export default config;
  

• collectCoverageFrom : coverage 정보를 수집할 때 어떤 파일을 대상으로 coverage 정보를 수집할 것인지 지정할 수 있다. default는 undefined이며 아래와 같이 설정하면 node_modules에 있는 파일을 제외한 js, jsx파일에서 coverage 정보를 수집한다.

    /** @type {import('jest').Config} */
    const config = {
      collectCoverageFrom: [
        '**/*.{js,jsx}',
        '!**/node_modules/**'
      ],
    };
  
    export default config;
  

• coverageDirectory : coverage file을 어느 경로에 저장할 것인지 설정한다.

    /** @type {import('jest').Config} */
    const config = {
      coverageDirectory: "./coverage_result"
    };
  
    export default config;
  

• coveragePathIgnorePatterns : test 실행시 coverage 수집에서 제외할 파일이나 폴더를 설정한다. default는 /node_modules/이다.

    /** @type {import('jest').Config} */
    const config = {
      coveragePathIgnorePatterns: "/node_modules/"
    };
  
    export default config;
  

• coverageProvider : coverage provider를 설정한다. babel이나 v8중 하나를 설정할 수 있다. default는 babel이다.

    /** @type {import('jest').Config} */
    const config = {
      coverageProvider: "babel"
    };
  
    export default config;
  

• globals : test code에서 접근할 수 있는 global variables을 설정할 수 있다.

    /** @type {import('jest').Config} */
    const config = {
      globals: {
        testVal: "MY-TEST",
      },
    };
  
    export default config;
  

    test("test sum", async () => {
      console.log(globalThis.testVal); // MY-TEST
      expect(2 + 3).toEqual(5);
    });
  

• moduleNameMapper : tsconfig.json에 path alias를 설정해놓고 import 하고 있다면 moduleNameMapper 설정을 통해 test code에서도 path alias를 통해 import할 수 있다.

  tsconfig.json

     {
      "compilerOptions": {
        ...
        "paths": {
          "@/*": ["./src/*"]
        }
      }
    }
  

  위의 tsconfig 설정 기준 모듈 import 경로

    import { add } from "@/utils/filter";
    // 위의 import 경로는 src/utils/filter와 같다.
  
    ...
  

  test code에서도 paths alias를 사용할 수 있도록 moduleNameMapper property를 설정

  jest.config.js

    /** @type {import('jest').Config} */
    const config = {
      moduleNameMapper: {
        "^@/(.*)$": "<rootDir>/src/$1",
      },
    };
  
    export default config;
  

• setupFilesAfterEnv : test code가 실행되기 전에 실행될 module을 지정할 수 있다. 예를 들어 DOM과 관련된 사항을 테스트할 수 있는 matcher를 사용하기 위해선 @testing-library/jest-dom package를 test code에 import해야 한다.

  이때 @testing-library/jest-dom package를 test code마다 import 하는 방법도 있지만 @testing-library/jest-dom package를 import하는 module ( file )을 하나 만들어 놓고 setupFielsAfterEnv에 설정하면 test code가 실행되기 전에 해당 module을 먼저 실행하므로 test code마다 @testing-library/jest-dom package를 import할 필요가 없어진다.

  예를 들어 아래와 같이 설정할 수 있다.

  jest.setup.ts

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

  jest.config.js

    /** @type {import('jest').Config} */
    const config = {
      setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
    };
  
    export default config;