Jest 테스트: Typescript 및 ES6를 사용하여 모킹 모듈 및 모듈 상태 처리

Jest는 Babel, TypeScript, Node, React, Angular 및 Vue와 같은 프로젝트에서 작동하는 인기 있는 테스트 프레임워크입니다. 다른 테스트 프레임워크와 마찬가지로 Jest는 각각의 속성과 기능을 사용하여 자바스크립트 개체와 모듈을 모의하고 감시하는 기능을 제공합니다. 또한 테스트 요구 사항에 따라 Javascript 모듈을 조롱하는 몇 가지 유연한 방법을 제공합니다.



모의 모듈을 만들 때 테스트는 모듈 간에 공유되는 개체의 상태를 유지하거나 지워야 합니다. 다음을 고려하세요:

ㅏ. 함수 또는 속성이 호출/액세스된 횟수 또는 전달된 인수와 같은 모듈 내의 스파이된 개체에 포함된 메타 데이터는 더 이상 관련이 없을 수 있으며 별도의 테스트에서 어설션이 수행되는 경우 지워야 합니다. 동일한 스파이 기능.

비. 모듈은 플래그가 테스트 간에 다른 값으로 토글될 것으로 예상되는 모의 구성 개체에 의존합니다. 해당 플래그에 대한 변경 사항을 반영하도록 해당 모듈의 상태를 재설정해야 합니다.

일반적으로 모듈 재설정/지우기/복원은 Jest에 내장된 설정 및 해제 기능 내에서 수행됩니다. (예: beforeEach() , afterEach() ). 그러나 이러한 기능 내에서 모듈을 재설정하는 방법은 프로젝트가 사용하도록 구성된 모듈 유형에 따라 다릅니다.

CommonJS 모듈

이러한 모듈은 require 구문을 사용하여 가져오며 모듈을 재설정하는 데 사용하기에 매우 간단합니다.

// module.js

exports.a = 1
exports.add = function (a) {
  return exports.a += a;
}

//module.test.js

let myModule;

beforeEach(async () => {
  myModule = require("./useMyModule");
});

afterEach(() => {
  jest.resetModules();
});

test("adds 1 to counter", () => {
  expect(myModule.add(1)).toBe(2);
  expect(myModule.add(1)).toBe(3);
});

test("adds 2 to counter", () => {
  expect(myModule.add(2)).toBe(3);
  expect(myModule.add(2)).toBe(5);
});

ES6 모듈

이러한 모듈(예: TypeScript를 사용하는 경우)은 import 구문을 사용하여 가져옵니다. 여기에서 모듈을 재설정하는 프로세스는 더 미묘하고 장황해집니다. 모듈은 isolateModules() 를 사용하여 테스트 간에 다시 가져와야 하는 로컬 변수로 가져와야 합니다. 그런 다음 각 테스트 또는 테스트 스위트는 다른 로컬 변수 인스턴스를 다시 가져온 해당 모듈로 설정해야 합니다. 다시 가져온 모듈(예: 구성 플래그)에서 사용하는 모의 함수/모듈의 동작 변경 사항은 해당 로컬 인스턴스 변수를 설정하기 전에 설정해야 합니다.

// useMyModule.ts

let value = 1;

function add(number: number): number {
  value += number;
  return value;
}

export default { add };

//useMyModule.test.ts  

import * as useMyModuleImport from "./useMyModule";

let useMyModule: typeof useMyModuleImport.default;

beforeEach(async () => {
  jest.isolateModules(async () => {
    return import("./useMyModule").then((module) => {
      useMyModule = module.default;
    });
  });
});

afterEach(() => {
  jest.resetModules();
});

let myModuleInstance: typeof useMyModule;
test("adds 1 to counter", () => {
  // Any mocked functions/modules used by useMyModule should be set here before setting myModuleInstance to the re-imported module. E.g. configuration flags.
  myModuleInstance = useMyModule;
  expect(myModuleInstance.add(1)).toBe(2);
  expect(myModuleInstance.add(1)).toBe(3);
});

test("adds 2 to counter", () => {
  myModuleInstance = useMyModule;
  expect(myModuleInstance.add(2)).toBe(3);
  expect(myModuleInstance.add(2)).toBe(5);
});

보시다시피 두 예제 모두 테스트 사이에 모듈 상태를 지울 수 있도록 허용합니다. ES6 모듈에는 약간의 설정이 더 필요합니다. 행복한 테스트!

위의 예는 영감을 받았습니다from this stackoverflow post..