🌊
自分の作ったChrome拡張にテストを組み込む(3) React-Testing-Libraryインストール編
JestとReact-Testing-Libraryを使って単体テストをやりたい
このメモの続きです。
対象レポジトリ
React-Testing-Libraryをインストールする
シンプルで完全なテストユーティリティで、優れたテストプラクティスを促進します。
そもそも、フロントエンドの知識経験が少ないので業務で利用しているフロントエンドのテストを理解し、書けるようになりたいという目的があります。
今回JestとReact-Testing-Libraryを選択したのは業務で利用しているということが大きいです。
React-Testing-LibraryではAtomicDesignの思想を元に小さくしたコンポーネントをテストできるという点で興味深いテストライブラリです。（個人の感想です）
脱線しましたが早速インストールしていこうと思います。
$ npm install --save-dev @testing-library/react
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: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! dev @testing-library/react@"*" 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-01T09_33_00_921Z-debug-0.log
また依存関係ィィ…。
2022年9月時点でReactの最新は18ではありますが、React@17のバージョンで実装しているので、ひとまずReact@17に対応しているReact-Testing-Libraryの最新である12でインストールします。
$ npm install --save-dev @testing-library/react@^12
added 11 packages, and audited 743 packages in 3s
74 packages are looking for funding
run `npm fund` for details
3 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Exampleを元にテストを追加する
サンプルがここに貼るには大きいのでリンク先のページを参考に仮のテストを作ります。
最初のReactコンポーネントのテストは多分ここらへんを見るのが良さそう。
とはいえ、オリジナルのコンポーネントを作成する前にまずはHTMLを使ったテストが動くようにしたい。
まずはテスト用のディレクトリを追加します。
$ tree -d src
src
├── Component
├── Container
├── FunctionalButton
├── Functions
│ └── __tests__
├── Section
│ └── ShortCutLinks
└── scss
$ mkdir -p src/Component/__tests__
テストで必要なライブラリも追加。
user-eventのインストール
$ npm install --save-dev @testing-library/user-event
added 1 package, and audited 744 packages in 2s
74 packages are looking for funding
run `npm fund` for details
3 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
jest-domのインストール
$ npm install --save-dev @testing-library/jest-dom
added 5 packages, and audited 749 packages in 3s
74 packages are looking for funding
run `npm fund` for details
3 high severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
jestのサイトのコードでまずテストしてみる。
src/Component/__tests__/LinkButton.tsx
/**
* @jest-environment jsdom
*/
import * as React from 'react';
test('use jsdom in this test file', () => {
const element = document.createElement('div');
expect(element).not.toBeNull();
});
テスト実行
$ npm run test
> short-cut-extension@1.3.2 test
> npx jest --config src/jest.config.ts
FAIL src/Component/__tests__/LinkButton.tsx
● Test suite failed to run
● Validation Error:
Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.
Configuration Documentation:
https://jestjs.io/docs/configuration
As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.
Test environment jest-environment-jsdom cannot be found. Make sure the testEnvironment configuration option points to an existing node module.
Configuration Documentation:
https://jestjs.io/docs/configuration
As of Jest 28 "jest-environment-jsdom" is no longer shipped by default, make sure to install it separately.
PASS src/Functions/__tests__/Unique.ts
✓ remove duplicate element (3 ms)
✓ remove duplicate elements
✓ remove duplicate elements (1 ms)
Test Suites: 1 failed, 1 passed, 2 total
Tests: 3 passed, 3 total
Snapshots: 0 total
Time: 2.757 s, estimated 3 s
Ran all test suites.
jest-environment-jsdom はまだインストールしていないのでインストールします。
jest-environment-jsdomのインストール
$ npm install --save-dev jest-environment-jsdom
では、今の状態でどうなるか、テストを実行します。
テスト実行
$ npm run test
> short-cut-extension@1.3.2 test
> npx jest --config src/jest.config.ts
PASS src/Functions/__tests__/Unique.ts
✓ remove duplicate element (2 ms)
✓ remove duplicate elements
✓ remove duplicate elements
PASS src/Component/__tests__/LinkButton.tsx
✓ use jsdom in this test file (2 ms)
Test Suites: 2 passed, 2 total
Tests: 4 passed, 4 total
Snapshots: 0 total
Time: 3.66 s
Ran all test suites.
テストが通るようになりました！
では自身で作成したコンポーネントのテストを書いていきましょう〜〜〜！
Discussion