かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Babel + Jest で JavaScript のテストをする

JavaScript Unit Test Babel Jest

Babel のインストールと設定ファイルの作成

$ yarn add -D @babel/core @babel/cli @babel/preset-env

babel.config.js

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

Jest のインストール

$ yarn add -D jest

公式ドキュメントによると babel-jest は jest をインストールすると自動的にインストールされるようなので別途インストールする必要はなくなったっぽい。

Jest の設定

Jestの設定ファイルは下記の4つの方法で作成できる

  1. jest --init コマンドで生成する
  2. package.json に "jest": {} で設定を書く
  3. jest.config.js ファイルを作成して設定を書く
  4. 適当な.jsか.jsonファイルを作成して、実行時に --config <設定ファイル> で設定ファイルを指定する

設定方法については公式ドキュメントが充実しているのでこれを参考にすれば良さそう

jest.config.js

module.exports = {
  // テストファイルは tests ディレクトリに指定
  // テストファイルには `spec` か `test` を付けるように指定
  testMatch: [
    "**/tests/**/?(*.)+(spec|test).[tj]s?(x)"
  ],
  // src ディレクトリ内の .js ファイルは babel-jest で変換する
  // babel-jest での変換だけならもしかしたら指定しなくても良いかも知れない
  transform: {
    "^.+\\.js$": '<rootDir>/node_modules/babel-jest',
  },
  // カバレッジの対象ファイルを `**/src/**/*.js` にして `node_modules` を除外
  collectCoverageFrom: [
    "**/src/**/*.js",
    "!**/node_modules/**",
  ],
};
注意 ディレクトリを指定する正規表現は **/ で始める必要がある

testMatch などでディレクトリを指定するばあいは先頭に **/ が無いとマッチするファイルがないというエラーになる。恐らくmonorepo構成に対応しているから **/ が必要なのかなという印象。

テスト時は Babel で import 文を require に変更するプラグインを導入

Jest は node の世界でテストを行うので ES Module の import をそのまま扱うことができないので、CommonJS の require に変更する必要があります。
ref. Using with webpack · Jest

Jest は実行時にデフォルトで process.env.NODE_ENV に test をセットするので、test の時 Babel で import を require に変換するようにする。

変換するプラグインのインストール
$ yarn add -D transform-es2015-modules-commonjs
Babelの設定を追加

babel.config.js

module.exports = {
  presets: [
    [
      "@babel/preset-env"
    ]
  ],
  env: {
    test: {
      plugins: [
        "transform-es2015-modules-commonjs",
      ],
    },
  },
};

テスト用の npm script の作成

package.json

"scripts": {
  "test": "jest",
  "test:w": "jest --watch",
  "test:coverage": "jest --coverage"
},
options
  • --watch ... テストファイルが変更されるごとにテストを実行してくれる。
  • --coverage ... テスト終了時にカバレッジが表示され /coverage ディレクトリに情報が吐き出される

Jest でテストが実行できるか試す

tests ディレクトリ内にindex.test.jsのような適当なテストファイルを作成して作成した npm script でテストを実行する

$ yarn run test
 RUNS  tests/index.test.js
 ...

Jest が実行されテスト結果が表示されればOK

感想とまとめ

webpackを使うともう少し設定が複雑になりそうだけど、BabelだけならJestの導入はとても簡単でした。(細かい設定についてはまだ把握しきれてないですが…) 設定ファイルでディレクトリを指定する際に **/ から始める必要があるという部分くらいでしょうか。ハマりどころは。

[参考]

Node.jsデザインパターン 第2版

Node.jsデザインパターン 第2版

ambie sound earcuffs（アンビー サウンドイヤカフ） (Pop Sky)

ambie sound earcuffs（アンビー サウンドイヤカフ） (Pop Sky)

👆 ambie のイヤフォン買った。外の音が聴こえつつちゃんと曲も聞けるし、何より耳に挟んでるからポロッと落とすストレスがなくて外出用にとても良いです。音量大きくすると流石にｼｬｶｼｬｶ音漏れしてましたが思ったより音漏れして無い感じでした。(白色の在庫復活してる買い増ししようかな)