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つの方法で作成できる
jest --init
コマンドで生成するpackage.json
に"jest": {}
で設定を書くjest.config.js
ファイルを作成して設定を書く- 適当な
.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の導入はとても簡単でした。(細かい設定についてはまだ把握しきれてないですが…) 設定ファイルでディレクトリを指定する際に **/
から始める必要があるという部分くらいでしょうか。ハマりどころは。
[参考]
- Getting Started · Jest
- Using with webpack · Jest
- この頃流行りのJestを導入して軽快にJSをテストしよう - Qiita
- 今更のバベる。 Babel 7を試してみたメモ - かもメモ
- node.js モジュール(ES Module)のimport/exportにハマる。 - かもメモ
- 作者: Mario Casciaro,Luciano Mammino,武舎広幸,阿部和也
- 出版社/メーカー: オライリージャパン
- 発売日: 2019/05/18
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
ambie sound earcuffs(アンビー サウンドイヤカフ) (Pop Sky)
- 出版社/メーカー: ambie株式会社
- メディア: エレクトロニクス
- この商品を含むブログを見る