[Jest] Jest 확장 프로그램 jest-extended 사용하기

 

Jest 확장 프로그램 jest-extended 사용하기

 

Jest-extended란?

- jest-extended는 Jest에서 사용할 수 있는 추가적인 matcher들을 제공하는 확장 라이브러리입니다.
- Jest에서 기본적으로 제공하는 matcher(toBe, toEqual, toContain 등) 외에도 다양한 상황에서 유용한 matcher들을 추가로 사용할 수 있게 해줍니다.
- jest-extended를 사용하면 테스트의 가독성과 표현력을 높일 수 있습니다.

 

Jest-extended 설치 (TypeScript 사용)

1. 설치

npm i -D jest-extended

 

2. Root에 global.d.ts 파일 생성 (Typescript)

import "jest-extended";

 

3. Root에 tsconfig.json 파일 생성 (Typescript)

{
  "files": ["global.d.ts"]
}

 

4. testSetup.ts (Typescript 사용 안한다면 .js)

import * as matchers from "jest-extended";
expect.extend(matchers);

 

5. jest.config.js에 setupFilesAfterEnv 추가 (Typescript 안쓰면 testSetup.js로 수정해주세요!)

import { createDefaultPreset } from "ts-jest";

const tsJestTransformCfg = createDefaultPreset().transform;

/** @type {import("jest").Config} **/
export default {
  testEnvironment: "node",
  transform: {
    ...tsJestTransformCfg,
  },
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$",
  setupFilesAfterEnv: ["./testSetup.ts"],
};

 

Typescript 사용하시는 분!!
위에대로 따라서 안하고 공식문서 보고 따라하면 오류나옵니다!
에러 내용 - import는 ECMAScript 모듈이기 때문에 jest에서 사용하려면 추가적인 설정이 필요하다는 에러

 

 

Jest-extended 사용 방법

https://jest-extended.jestcommunity.dev/docs/matchers/

Matchers | jest-extended

 

기존) jest-extended를 사용하지 않고 함수의 호출 순서를 확인하는 코드

import { first, second, third } from "./order";

// jest-extende를 사용하지 않고 함수 호출 순서 확인
test("jest-extende를 사용하지 않고 함수 호출 순서 확인", () => {
  const spy1 = jest.fn(first);
  const spy2 = jest.fn(second);
  const spy3 = jest.fn(third);

  spy1();
  spy2();
  spy3();

  console.log(spy1.mock);
  console.log(spy2.mock);
  console.log(spy3.mock);

  expect(spy1.mock.invocationCallOrder[0]).toBeLessThan(
    spy2.mock.invocationCallOrder[0]
  );

  expect(spy3.mock.invocationCallOrder[0]).toBeGreaterThan(
    spy2.mock.invocationCallOrder[0]
  );
});

 

 

적용) 직접 mock 데이터에 접근해야하는 번거로움 + 가독성이 떨어지는 문제가 발생하여 jest-extended를 사용한 방식으로 대체

import { first, second, third } from "./order";

// jest-extende를 사용해 함수 호출 순서 확인
test("jest-extende를 사용해 함수 호출 순서 확인", () => {
  const spy1 = jest.fn(first);
  const spy2 = jest.fn(second);
  const spy3 = jest.fn(third);

  spy1();
  spy2();
  spy3();

  // expect(spy1.mock.invocationCallOrder[0]).toBeLessThan(
  //   spy2.mock.invocationCallOrder[0]
  // );
  expect(spy1).toHaveBeenCalledBefore(spy2);

  // expect(spy3.mock.invocationCallOrder[0]).toBeGreaterThan(
  //   spy2.mock.invocationCallOrder[0]
  // );
  expect(spy3).toHaveBeenCalledAfter(spy2);
});