Zenn
🍣

自分の作ったChrome拡張にテストを組み込む(1) Jestインストール編

2022/08/31に公開
Chrome拡張
TypeScript
Jest
tech

JestとReact-Testing-Libraryを使って単体テストをやりたい

対象レポジトリ

https://github.com/satoshi-nishinaka/chrome-extension-study

勉強用に作っているChrome拡張にJestとReact-Testing-Libraryを入れて単体テストを出来るようにしたい。

元々React,TypeScriptの勉強のためにChrome拡張を作っているんだけど、業務ではフロントのテストを実装する。

Jestをインストールする

TypeScript化を行うにあたって　@tomofummy さんが公開されているStarterのレポジトリを元に作っているので元々Jest自体は入っていたんだけど、Jestを使っていないからライブラリ自体はそのまま残っているけどテストディレクトリを消してしまっていた。

参考：
chibat/chrome-extension-typescript-starter: Chrome Extension TypeScript Starter

npmコマンドを使ってJestをインストールする
$ npm install --save-dev jest @types/jest

テストを動かしてみる

既にpackage.jsonのscriptsのブロックにテストの設定はしてある状態

package.json
  "scripts": {
    "watch": "webpack --config webpack/webpack.dev.js --watch",
    "build": "webpack --config webpack/webpack.prod.js",
    "clean": "rimraf dist",
    "test": "npx jest",
    "lint": "eslint src",
    "lint:fix": "eslint --fix src"
  },
テスト実行
$ npm run test

> short-cut-extension@1.3.2 test
> npx jest

● Validation Error:

  Module ts-jest in the transform option was not found.
         <rootDir> is: /Users/satoshie/git/chrome-extension-study

  Configuration Documentation:
  https://jestjs.io/docs/configuration

レポジトリ内の jest.config.js が古くて対応してないようだ…。

https://jestjs.io/docs/configuration に記載されている内容を元に新たに設定ファイルを作ってみる。

jest.config.ts
import type { Config } from 'jest';

const config: Config = {
  verbose: true,
};

export default config;
テスト実行
$ npm run test

> short-cut-extension@1.3.2 test
> npx jest

Error: Jest: Failed to parse the TypeScript config file /Users/satoshie/git/chrome-extension-study/jest.config.ts
  Error: Jest: 'ts-node' is required for the TypeScript configuration files. Make sure it is installed
Error: Cannot find package 'ts-node' imported from /Users/satoshie/git/chrome-extension-study/node_modules/jest-config/build/readConfigFileAndSetRootDir.js
    at readConfigFileAndSetRootDir (/Users/satoshie/git/chrome-extension-study/node_modules/jest-config/build/readConfigFileAndSetRootDir.js:136:13)
    at async readConfig (/Users/satoshie/git/chrome-extension-study/node_modules/jest-config/build/index.js:216:18)
    at async readConfigs (/Users/satoshie/git/chrome-extension-study/node_modules/jest-config/build/index.js:404:26)
    at async runCLI (/Users/satoshie/git/chrome-extension-study/node_modules/@jest/core/build/cli/index.js:182:59)
    at async Object.run (/Users/satoshie/git/chrome-extension-study/node_modules/jest-cli/build/cli/index.js:155:37)

oh...

改めてJestのドキュメントを見ながらts-jestをインストールする。

ts-jestのインストール
$npm install --save-dev ts-jest
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: short-cut-extension@1.3.2
npm ERR! Found: jest@29.0.1
npm ERR! node_modules/jest
npm ERR!   dev jest@"^29.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jest@"^28.0.0" from ts-jest@28.0.8
npm ERR! node_modules/ts-jest
npm ERR!   dev ts-jest@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/satoshie/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/satoshie/.npm/_logs/2022-08-31T10_46_52_391Z-debug-0.log

依存関係が…仕方ないので最新ではなく jest@^28.0.0 でインストールし直す。
一緒にテスト実行時に出ていた Jest: 'ts-node' is required for the TypeScript configuration files. という指示に従って ts-node もインストールする。

ts-jest,ts-nodeのインストールとjestの再インストール
$ npm install --save-dev ts-jest@28.0.8 jest@^28.0.0 ts-node

再度テスト実行してみる

必要なものは揃った気がするのでテスト実行してみる。

テスト実行
$ npm run test

> short-cut-extension@1.3.2 test
> npx jest

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /Users/connehito166/git/chrome-extension-study
  52 files checked.
  testMatch: **/__tests__/**/*.[jt]s?(x), **/?(*.)+(spec|test).[tj]s?(x) - 0 matches
  testPathIgnorePatterns: /node_modules/ - 52 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches

テストコードは置いてないのでこの結果は正しそう！

次はテストコードの追加だ！
https://zenn.dev/satoshie/articles/cbbe6a60cf2570

Discussion