Jest와 ESM의 테스트 문제 및 해결 방법

이번 주에는 RefactorCode 프로젝트에 테스트를 추가하는 임무를 받았습니다. 새로운 기능을 추가하기 시작하면서 일부 기존 기능이 손상되고 모든 것을 수동으로 테스트하는 것이 점점 더 어려워지는 것을 발견했습니다. 이를 통해 애플리케이션의 안정성을 보장하기 위해 적절한 자동 테스트를 구현해야 한다는 것이 분명해졌습니다.

이전 프로그래머를 위한 클라우드 컴퓨팅 과정에서 Node.js로 작업하면서 Jest를 사용한 경험이 있었기 때문에 이 프로젝트에도 Jest를 사용하기로 결정했습니다. 나는 내 코드의 기능을 확인하기 위해 몇 가지 테스트를 작성하는 것부터 시작했습니다. 그러나 이전에 직면하지 않았던 몇 가지 오류가 발생했습니다. Stack Overflow를 통해 디버깅하고 검색한 후에 Jest와 함께 ESM(ECMAScript Modules)을 사용할 때 추가 구성이 필요하다는 것을 깨달았습니다. 이전 프로젝트에서는 완벽하게 작동하는 CommonJS를 사용했습니다. 변환을 위해 Babel을 사용할 수도 있었지만 Jest는 ESM을 직접 실행할 수 있는 새로운 베타 기능을 제공했습니다. 한번 시도해 보기로 했고 정말 효과가 좋았습니다!

ESM으로 jest를 구성하는 것과 관련된 모든 내용을 설명합니다: https://jestjs.io/docs/ecmascript-modules

설정에 대한 간략한 개요는 다음과 같습니다.

Jest 설치:

npm install --save-dev jest

jest.config.js 파일을 만듭니다. 여기서는 무시할 폴더도 설정합니다.

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};

package.json 스크립트 섹션에서 jest에 대한 실험적 인수를 사용하여 ESM 모듈과 작업합니다.

"scripts": {
    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
}

테스트 파일을 생성합니다. 루트 디렉터리의 테스트 폴더 내에 모든 테스트를 만들었습니다. 다음은 제가 만든 간단한 것입니다:

import { readFile, checkIfDirectory } from "../src/fileUtils";

describe("File Utility", () => {
    test("Read File", () => {
      readFile("./examples/test.txt").then((data) => {
        expect(data).toBe("Hello World");
      });

    });

    test('should return true if the path is a directory', async () => {
      const result = await checkIfDirectory('./examples');
      expect(result).toBe(true);
    });
});

단일 테스트 파일을 사용하여 테스트하려는 경우:

npm test -- banner.test.js

모든 테스트를 실행하기 위해 이전에 package.json에 추가한 스크립트를 사용합니다.

npm run test

드디어 기본 테스트가 설정되었습니다. 그러나 이것은 문제 해결 여정의 시작에 불과했습니다. 또한 특히 ESM을 사용하고 있었기 때문에 라이브러리와 모듈을 모의하는 데 어려움을 겪었습니다. 여기에는 추가 구성이 필요했지만 약간의 조정 후에는 모든 것이 제대로 작동할 수 있었고 테스트는 성공적으로 실행되었습니다.

일반 jest.mock을 사용하는 대신 jest.unstable_mockModule을 사용해야 합니다.

For example: await jest.unstable_mockModule("fs", () => ({
  existsSync: jest.fn(),
  readFileSync: jest.fn(),
}));

자세한 내용은 이 섹션을 참조하세요.

제가 테스트하고 싶었던 핵심 기능 중 하나는 Gemini API와의 통합이었습니다. 테스트를 위해 라이브 API에 의존하고 싶지 않았기 때문에 API 호출을 모의하기로 결정했습니다. 처음에는 Nock을 사용해 보았지만 Node의 기본 가져오기 구현과 잘 작동하지 않아 문제가 발생했습니다. Gemini 라이브러리가 제3자 가져오기 구현 대신 기본 가져오기를 사용하는 것 같았고 이로 인해 모의 작업이 실패했습니다. 여러 번 시도했지만 성공하지 못한 끝에 MSW(Mock Service Worker)라는 다른 라이브러리로 전환했습니다. 모의 서버를 생성하려면 약간의 설정이 필요했지만 첫 번째 시도에서는 완벽하게 작동했습니다. Gemini API의 응답 방식을 기반으로 예제 응답을 작성하여 리팩터링된 기능을 테스트할 수 있었습니다.

참고용으로 모의 서버를 구성한 방법은 다음과 같습니다.

npm install --save-dev jest

애플리케이션에 사용 중인 특정 API 엔드포인트를 모의하고 있는 것을 볼 수 있습니다. 이제 테스트하는 동안 서버를 시작하려면 아래 항목을 추가하기만 하면 됩니다.

export default {
  testPathIgnorePatterns: ["/node_modules/", "/examples"],
  transform: {},
};

이 과정을 되돌아보면 이것은 나에게 훌륭한 학습 경험이었습니다. 돌이켜보면 내가 사용하고 있던 라이브러리의 호환성을 확인하고 잠재적인 문제를 미리 고려했어야 했을 것입니다. 어려움에도 불구하고 테스트가 원활하게 진행되는 지점에 도달하게 되어 기쁩니다. 앞으로 더 많은 테스트를 추가하고 프로젝트의 전반적인 안정성을 개선할 수 있기를 기대합니다.

위 내용은 Jest와 ESM의 테스트 문제 및 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!