Jestでimportが使用できる理由

Question

Reactプロジェクトにテスト用フレームワークとして、Jestを使ってみたのですが、
テストを行うファイルの中で

import React from "react";
import { render, fireEvent, waitForElement } from "@testing-library/react";
import { Dispatch } from "redux";
import { BrowserRouter as Router } from "react-router-dom";
import "@testing-library/jest-dom/extend-expect";

のようにES6の import システムを使ってもNode環境で実行できてテストがなぜパスするのかが疑問です。

ES6のモジュールシステムはNodeだと実行できないと思っていたのですが、これは勘違いで問題なく動くのでしょうか？

また、jestの設定で

// package.json

"jest": {
    // 省略
    "moduleNameMapper": {
      "\.(css)$": "<rootDir>/src/tests/__mocks__/styleMock.js"
    }
  }

のように設定し、実際のモックとなるファイルに

export default {}

とするとエラーになります。

逆に

module.export = {}

とすると通ります。

これはなぜなのでしょうか。

よろしくお願いいたします。

Answer 1

詳しくはわかりませんが、Jest って実行すると特定フォルダを検索して、*.test.js とかを読みにいきテストを勝手に行いますよね。

node で直接実行かけているわけではなく、aaa.test.js を読み込んでそれを実行するわけです。その過程において、aaa.test.js をJest内部にあるモジュールバンドラ(webpackとかか？)にかけて、結合してからその内容にそって、describeやitやexpectなども含んだ状態で、nodeに実行かけているのでしょう。

なので、import にも対応できるのでしょう。

moduleNameMapper の設定のところではその仕組みを導入していないので、CommonJS形式でしか受け付けてないというものなのではないでしょうか。

よく知らずに適当ですが。

Comments

[suny]

ありがとうございます！

もう一度調べてみたのですが、どうやらその通りで

自分の環境ではts-jestというツールで解析していたのですが、moduleNameMapperの部分は通ってなかったっぽいです。

ありがとうございました！

[standard-soft]

を！ビンゴでしたか。
よかったです。