こんにちは。印刷のラクスルでフロントエンドを担当している菅野です。

今回はJestで単体テストを実行した際、同時にESlintも走らせるための設定をご紹介します。

TL; DR

• jest-runner-eslintというパッケージを導入した
• Jestでの単体テスト実行と同時に、テストファイルに対してlintをかけるようにした
  • autofixもするようにした

やりたかったこと

• テスト実行(npm run test)と同時に、テストファイルにのみlintを実行したい
  • lintのために別scriptを実行は、あまりしたくない
  • Jestと連携させたい
• ついでにautofixもさせたい(npm run lint --fix相当)

前提条件

• Jestが導入されていること
• ESlintが導入されていること(.eslintrcがプロジェクトに存在すること)

動作環境

今回、jest-communityで公開されているjest-runner-eslintというパッケージを使用しました。

• jest: 24.8.0
• jest-runner-eslint: 0.7.6

設定

基本的に、公式のREADMEに沿って設定していきます。

https://github.com/jest-community/jest-runner-eslint/blob/master/README.md

runnerを分割する

今回は、テスト自体の実行とlintの実行を別々に走らせるようにしました(公式でも推奨されているようです)。

https://github.com/jest-community/jest-runner-eslint/blob/master/README.md#alongside-other-runners

導入前のJest設定は以下のようになっていました。

導入したプロジェクトでは、Jest設定をpackage.json内に記述しています。

{
  "jest": {
    "modulePaths": [
      "<rootDir>/src/javascripts"
    ],
    "moduleFileExtensions": [
      "js",
      "ts",
      "d.ts",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\\\.js$": "<rootDir>/node_modules/babel-jest",
      "^.+\\\\.ts$": "<rootDir>/node_modules/ts-jest",
      ".*\\\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "globals": {
      "ts-jest": {
        "tsConfig": "tsconfig.json"
      }
    },
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/javascripts/$1",
      "^@Test/(.*)$": "<rootDir>/test/$1"
    },
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  }
}

導入後は以下のようになりました。

projects を複数設定することで、それぞれ別のrunnerとして実行することができます。

そして、それぞれのrunnerの設定ファイルを以下のように分割し、package.jsonで読み込むようにしました。

{
  "jest": {
    "projects": [
      "<rootDir>/jest-test.config.json",
      "<rootDir>/jest-eslint.config.json"
    ]
  },
  "jest-runner-eslint": {
    "cliOptions": {
      "fix": true,
      "ext": [
        ".js",
        ".ts"
      ]
    }
  }
}

runner毎の設定ファイルを作成する

jest-test.config.json

{
  "displayName": "test",
  "modulePaths": [
    "<rootDir>/src/javascripts"
  ],
  "moduleFileExtensions": [
    "js",
    "ts",
    "d.ts",
    "json",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    "^.+\\.ts$": "<rootDir>/node_modules/ts-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "globals": {
    "ts-jest": {
      "tsConfig": "tsconfig.json"
    }
  },
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/javascripts/$1",
    "^@Test/(.*)$": "<rootDir>/test/$1",
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
  ],
  "setupFiles": [
    "<rootDir>/test/setup"
  ]
}

jest-eslint.config.json

{
  "displayName": "lint",
  "runner": "<rootDir>/node_modules/jest-runner-eslint",
  "testMatch": [
    "<rootDir>/test/**/*.js",
    "<rootDir>/test/**/*.ts"
  ]
}

重要なポイント

• jest-runner-eslint
  • https://github.com/jest-community/jest-runner-eslint/blob/master/README.md#options
  • ここではjest-runner-eslintの様々なオプションを設定することができます。
  • 今回は、ESlintのcliオプションとして、--extと--fix相当の設定を行いました。

{
  "jest-runner-eslint": {
    "cliOptions": {
      "fix": true,
      "ext": [
        ".js",
        ".ts"
      ]
    }
  }
}

• displayName
  • npm run testを実行した際、このオプションに設定した名称がコンソールに表示されます。どちらのrunnerか分かりやすくなるため設定しましょう。
  • 今回はシンプルにtest, lintとしました。

実際に動かしてみる

npm run test(Jest実行用のnpm script)を実行すると、テストとlintが同時に実行されます。

もちろん、Jestに--watchオプションを付与すれば、テスト対象ファイルやテストファイルをsaveしたときは、lintも自動で実行されます。

まとめ

今回は、Jestを実行した際に同時にESlintを実行する方法をご紹介しました。

導入自体は、既にJestとESlintの環境があればとても簡単でしたが、web上にあまり情報がなかったため、今回記事にしてみました。

読んでくださった皆さんの助けになれば幸いです。

ラクスルでは、伝統的な業界のデジタル化を推進するフロントエンドエンジニアを募集しています。