ES6에서 쓴 class를 Jest로 테스트

하고 싶은 일

ES6에서 쓴 프런트엔드를 따라 Javascript 라이브러리를 Jest 테스트하려고 합니다.

경과와 사전 조사(건너뛰어도 상관없음)

Jest 시험 때, node.원칙적으로 js의 표준 common JS 방식이다.node.만약 js의 라이브러리를 썼다면 common JS로 라이브러리를 쓰면 되지만 앞부분이라면 안 된다.예를 들어, index입니다.에 대한 index를 입력합니다.js에서testdayo.js 이하의class를 읽습니다.
testdayo.js

class Test {
  constructor() {
    console.log("呼ばれたよ");
  }
}

module.exports = Test;

index.js

const Stellaria = require("./testdayo.js");

이렇게 되면 이런 착오가 생길 수 있다.

Uncaught ReferenceError: require is not defined
    at index.js:9:19

그럼 import ~ from ~; 쓰면 되지 않나요?그리고 index.js를 다음과 같이 쓰면
index.js

import Stellaria from "./testdayo.js";

다음엔 이렇게 혼날 거야.

Uncaught SyntaxError: The requested module './testdayo.js' does not provide an export named 'default'

결과 앞부분의 자바스크립트는common JS를 사용할 수 없기 때문에 ES6에 따라 써야 한다.즉, 아래와 같다.
testdayo.js

class Test {
  constructor() {
    console.log("呼ばれたよ");
  }
}

export default Test;

index.js

import Stellaria from "./testdayo.js";

여기에 다음 문제가 생길 것이다.이 반Test반을 테스트하려면 Jest에서 다음과 같은 오류가 발생합니다.

    export default Stellaria;
    ^^^^^^

    SyntaxError: Unexpected token 'export'

당연한 일이지만 Jest는 common JS만 지원하기 때문에 export를 모른다고 합니다.
테스트하려는 프런트엔드 코드를 ES6에서 common JS로 바꿔야 한다는 것이다.
다양한 결과를 조사해 다음과 같은 기사를 확인했다.
https://zenn.dev/dozo/articles/0091f1a3e790d6
https://qiita.com/irico/items/0fa0cde39b1305c4b508
이러한 작업은 명령을 수정하거나 프로파일을 덮어쓸 수 있습니다.
나는 지령을 만지작거리고 싶지 않다. 문서를 설정하는 것도 그렇고 여기에 소개된 것은 좀 복잡하다(자신의 목적은 많이 낭비하는 것이다). Jest의 공식 Reference를 참고하여 조금 간단하게 써 보았다.

필요한 모듈 설치

Jest에서 ES6를 commonJS로 변환할 때 npm 설치 모듈[1]을 사용합니다.Babel.

npm i --save-dev babel-jest @babel/core @babel/preset-env

Jest에서 사용한 Babel의 설정 파일 작성

Babel의 구성 파일은 매우 간단합니다.루트 디렉터리 (패키지.json과 같은 등급의 디렉터리) 에 다음 코드를 저장해 주십시오 [1:1].
babel.config.js

module.exports = {
  presets: [["@babel/preset-env", { targets: { node: "current" } }]],
};

이 정도면 됐어.
여기서 주의해야 돼, 패키지.json의 'type' 을 'module' 로 바꾸지 마세요.
하면, 만약, 만약...

Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.

의 오류가 발생했습니다.즉, ES6의 module에 대한 config 파일이 추가로 필요합니다.준비할 수 있었으면 좋겠는데 여긴 범위가 아니어서 설명 안 해.

시험을 시작하다

남은 건 시험 시작일 뿐이야.테스트 파일도 ES6에 따라 작성해야 합니다.
hogehoge.test.js

import Test from "../testdayo.js"; //こんな感じで書く

describe("Test making instance", () => {
  test("Test making instance", () => {
    const test = new Test();
  });
});

이것 괜찮아요?

npm run test

이 시작된 후 안전은 다음과 같다(테스트 파일의 명칭은 문장과 다르다).

각주
Getting Started
/JEST https://jestjs.io/docs/getting-started ↩︎ ↩︎