ESLint+JestでJavaScriptのコードをテストするための解決策

最近作成しているプロジェクトにJestを導入したのはいいが、ESLintを導入していたためにJestが使用できなくなって困ったので解決策の備忘録。いつもよりは内容短いです。サンプルコードは入れていません。

今回の対象読者

作成中のコードにESLintとJestを導入したい人

※どちらがどういったツールかの説明は今回はしません。Jestの基本については後日・・・

今回使用した動作環境

Windows10 Home Version1903の

Ubuntu 18.04 LTS（WSL1）

解決手順

1．必要なパッケージのインストール

ESLintとJestを次のコマンドでローカルインストールします。

npm install eslint --save-dev

# もしくは

yarn add eslint --dev

npm install --save-dev jest

# もしくは

yarn add --dev jest

このままではテスト用コマンドにエラーが出てしまうのでeslint-plugin-jestというESLintのプラグインをインストールする

npm install --save-dev eslint-plugin-jest

# もしくは

yarn add --dev eslint-plugin-jest

2．設定ファイルを作成する

今回は以下のディレクトリ構成例で進めていきます。

    ･
    ├── node_modules
    ├── package.json
    ├── package-lock.json*
    ├── tests
    |   ├── .eslintrc.json
    |   └── index.test.js
    |       
    └── .eslintrc.json
    └── index.js

*yarnコマンドで進める際はyarn.lock

※ESLintの設定ファイルとなる.eslintrc.jsonファイルについてはjson形式以外の形式にしても構いません。今回はjson形式で進めていきます。

インストールを終えた後はtestsフォルダにディレクトリ直下の方とは別に.eslintrc.jsonを設置し、eslint-plugin-jestプラグインを反映させるために次の形で設定を記載します。

// tests/.eslintrc.json
{
  "plugins": ["jest"],
  "extends": "plugin:jest/recommended"
}

一方ルートディレクトリ直下の.eslintrc.jsonはテストコード以外の設定を記載した状態で使用する。

そうすると上記の構成例にあるindex.test.jsのようにJestで作成する際にtest関数などにエラーが出ずテスト実行する事ができるようになる。

参考サイト

以下のサイトの項目「ESLintの対応」を参照した。 qiita.com

きままに記録箱

フロントエンドたまに他のはなし