Zenn
😱

自分の作ったChrome拡張にテストを組み込む(6) Chrome拡張のテスト追加編

2022/09/24に公開
Chrome拡張
React
TypeScript
Test
Jest
tech

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

https://zenn.dev/satoshie/articles/198df7b0f70f34

このメモの続きです。

対象レポジトリ

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

Jest,React-Testing-Libraryでテストを追加していく上で躓いたことを引き続きメモで残していきます。

Chrome拡張のテストをしたい

「お前は何を言っているんだ？」 ってなるかもしれません。
これまではReact + TypeScriptで作ったChrome拡張の単体テストを出来るように環境を整えてきました。
飽くまでReactとしてのテストだったので、実はまだChrome拡張としてのテストは出来ていませんでした。

そこで、Chromeブラウザの機能を使ったコンポーネントのテストを追加してみた所、以下のようなエラーが表示されました。

ReferenceError: chrome is not defined

ググって見た所、sinon-chromeというものと、jest-chromeなるものがあるらしいことがわかりました。

sinon-chromeの最終リリース日が2018/05/11、jest-chromeが2021/08/13となっていてどちらもそんなに活発ではない様子…。

とはいえ、より最近のjest-chromeの方を採用することとします。

jest-chromeをインストールする

$ npm i jest-chrome -D

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@28.1.3
npm ERR! node_modules/jest
npm ERR!   dev jest@"^28.1.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jest@"^26.0.1 || ^27.0.0" from jest-chrome@0.7.2
npm ERR! node_modules/jest-chrome
npm ERR!   dev jest-chrome@"*" 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-09-24T00_11_27_226Z-debug-0.log

また依存関係だ…(^q^)

jestの最新は29.0.3(2022/09/24現在)、今取り扱っている自作のChrome拡張がReactのバージョン17なのでjestのバージョンは28.1.3を入れているんだけど、それにはまだ対応していないようだ…。
こういうライブラリは更新頻度が高めのほうが安心感があるので似たようなものがないか探すのも一つの手段。

npmjs.comで jest chrome で改めて検索しても更新がされていそうな良さげなのがないんですが…

jest-chromeのインストール

仕方ないので強制的にjest-chromeをインストールする

jest-chromeのインストール
$ npm install jest-chrome @types/chrome -D --force
npm WARN using --force Recommended protections disabled.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: jest-chrome@0.7.2
npm WARN Found: jest@28.1.3
npm WARN node_modules/jest
npm WARN   peer jest@"^28.0.0" from ts-jest@28.0.8
npm WARN   node_modules/ts-jest
npm WARN     dev ts-jest@"^28.0.8" from the root project
npm WARN   1 more (the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer jest@"^26.0.1 || ^27.0.0" from jest-chrome@0.7.2
npm WARN node_modules/jest-chrome
npm WARN   dev jest-chrome@"*" from the root project
npm WARN
npm WARN Conflicting peer dependency: jest@27.5.1
npm WARN node_modules/jest
npm WARN   peer jest@"^26.0.1 || ^27.0.0" from jest-chrome@0.7.2
npm WARN   node_modules/jest-chrome
npm WARN     dev jest-chrome@"*" from the root project

added 6 packages, and audited 694 packages in 4s

71 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

設定ファイルの更新

Readmeに書かれているように設定ファイルを更新します。

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

const config: Config = {
  verbose: true,
  transform: {
    '^.+\\.ts.?$': 'ts-jest',
  },
  transformIgnorePatterns: [],
  setupFilesAfterEnv: ['./jest.setup.js'],
};

export default config;
src/jest.setup.js

Object.assign(global, require('jest-chrome'))

テスト実行

では、ある程度テストが通るようにコードを整えた上でテストを実行します。

テスト実行
$ npm run test

> short-cut-extension@1.3.2 test
> npx jest --config src/jest.config.ts

 PASS  src/Component/__tests__/LinkButton.tsx (16.074 s)
  ✓ renders a button (397 ms)

  console.debug
    saveValues

      at DummyStorage.saveValues (Storage.ts:18:17)

 PASS  src/Container/__tests__/CardContainer.tsx (15.958 s)
  render
    ✓ should render component (335 ms)
    ✓ set title (6 ms)

  console.debug
    saveValues

      at DummyStorage.saveValues (Storage.ts:18:17)

  console.debug
    saveValues

      at DummyStorage.saveValues (Storage.ts:18:17)

  console.debug
    saveValues

      at DummyStorage.saveValues (Storage.ts:18:17)

 PASS  src/Section/__tests__/HighlightSection.tsx (16.246 s)
  ✓ should render component (500 ms)
  ✓ change value after click (94 ms)

 PASS  src/Section/__tests__/SettingSection.tsx (16.34 s)
  ✓ should render component (376 ms)

 PASS  src/Component/__tests__/ImageButton.tsx (16.395 s)
  render
    ✓ should render component (428 ms)

 PASS  src/Section/__tests__/PageInformationSection.tsx (16.381 s)
  ✓ should render component (250 ms)

 PASS  src/Functions/__tests__/Unique.ts
  ✓ remove duplicate element (3 ms)
  ✓ remove duplicate elements
  ✓ remove duplicate elements (1 ms)

 PASS  src/Section/__tests__/ToolsSection.tsx (17.238 s)
  ✓ should render component (204 ms)

 PASS  src/Component/__tests__/TabEntry.tsx
  ✓ renders a tab (182 ms)

 PASS  src/Container/__tests__/TabContainer.tsx
  render
    ✓ should render component (182 ms)

Test Suites: 10 passed, 10 total
Tests:       14 passed, 14 total
Snapshots:   0 total
Time:        20.389 s
Ran all test suites.

まだまだChromeのテストのやり方がわかっていない＋テストの内容は充実しているとは言えないのでこれから改めてテストコードの書き方を調査しつつテストコードの内容を検討しています！

Discussion