14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Jestを導入したのでメモ

Posted at

気付いたらかいしゃが Qiita Organizations に入っていて、記事書いてねって言われたので Jest を導入した際のメモを上げてみます。

新しいものの導入ってまあ楽しいけど、でも手間だよね。たまにドキュメント読んでも躓く箇所があったりするし。(見落としの場合もあるけど)
今回は Webpack の alias を解決する所で一瞬躓いたので、その情報共有も兼ねたいと思います。

Jest とは

Jest · 🃏快適なJavaScriptのテスト https://facebook.github.io/jest/ja/

ざっくり: Facebook製JSテストツール。 Node.js 上で実行される。

動機

  • JavaScript のテスト環境とかテスト方法がよく分かってなかったので。
  • 小さく疎結合にIFをシンプルにデバッグしやすく作っても、どうしてもバグは混入すると思うので、もうちょっと何かをどうにかしたい気持ちがあった。 (ふわっとしてる)
  • 予想しない挙動 (=バグのことだけど...) を早めに拾えるようにしたかった。
  • Mocha, Chai, Karma, ... と色々あって、何がどれでどんな役割か調べるのがめんどうくさかった。
  • とりあえず触ってみようと思い、Facebookさまの Jest を選択した。

導入方法

基本作業

npm i -D jest
package.json
{
  "scripts": {
    "test": "jest"
  }
}

--no-cache と付けるとBabel?のキャッシュが参照されなくなる。
テストコードのコンパイル時間はかかるけど、意図しないテスト結果を避けられる?

追加作業

ESLint によるテストコードのエラーの表示をなんとかしたい場合

npm i -D eslint-plugin-jest
.eslintrc
{
  "extends": ["plugin:jest/recommended"]
}

とか。

Babel, AsyncFunction を使う場合

npm i -D babel-jest regenerator-runtime

.babelrc は自動で参照してくれるらしい。
ただし、ENVには自動で test が適用されるそう。

import 構文を使う場合

Node.js は ES Modules (ESM) がまだちゃんと使えないと思うので、CommonJS形式に変換する方向で作業させると無難。もしくはそうしないと動いてくれない。

npm i -D babel-plugin-transform-es2015-modules-commonjs
.babelrc
{
  "env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
  }
}

テストとして実行されるファイル

デフォルトでは、 Jestの rootDir 配下にある
次のパターンのファイルをテストコードと見做して実行しようとしてくれる。 (オプションの testMatch という設定で変えられる.)

[
  '**/__tests__/**/*.js?(x)',
  '**/?(*.)(spec|test).js?(x)'
]

正規表現を簡単に説明すると

  • __tests__ ディレクトリ配下の、全ての *.js ファイル
  • 全ての *.spec.js または *.test.js

となる。

Webpack の alias の解決

公式ドキュメント をチラ見しただけだと上手く動かせなくて一瞬困った。
String.replace() みたいに、 key の () でパターンマッチした値を value に $1 とか書いて置いてあげる必要があるみたい。

{
  "moduleNameMapper": {
    "^@utils/(.+)$": "<rootDir>/resources/assets/js/utils/$1",
    "^@js/(.+)$": "<rootDir>/resources/assets/js/$1"
  }
}

テストコードはドキュメント読めばなんとかなりそうだったのでかつあい。

done

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?