自分の作ったChrome拡張にテストを組み込む(5) React-Testing-Libraryを使った振る舞いのテスト追加編
JestとReact-Testing-Libraryを使って単体テストをやりたい
このメモの続きです。
対象レポジトリ
イベントのテストを書きたいです
表示のテストは前回の項で実装を行いました。
今回はフロントエンドでの「振る舞い」をテストしていきたいと思います。
ヘッドレスブラウザのような感じで fireEvent を使って振る舞いをテストできます。
refs: Firing Events | Testing Library
今回はcontent_scriptを利用して表示している画面の中の特定の単語に対してハイライトをつけるための設定画面にテストを追加していきたいと思います。
画面自体はこのような感じで
コンポーネント側の実装はこんな感じで実装しています。
細かい実装やダメ出しは放っておいてもらって……。
クリックイベントのテストを追加
ハイライト有効 ボタンをクリックすることで textarea の活性化・非活性化とボタンの色の切り替えを行っています。
実際にはハイライト有効ボタンをクリックすると自作した Storage クラスのプロパティの enableHighlight のbool値が切り替わるようになっています。
<label
className={state.enableHighlight ? 'label label-enabled' : 'label'}
onClick={() => {
const value = !state.enableHighlight;
setState({ ...state, enableHighlight: value });
storage.enableHighlight = value;
storage.saveValues();
}}
>
ハイライト有効
</label>
では実際のテストを書いていきます。
/**
* @jest-environment jsdom
*/
import * as React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { HighlightSection } from '../HighlightSection';
import { DummyStorage } from '../../Storage';
const storage = new DummyStorage();
storage.highlightWords = 'hoge';
test('show component', async () => {
storage.enableHighlight = true;
render(<HighlightSection storage={storage} />);
expect(await screen.findByDisplayValue('hoge')).toBeInTheDocument();
fireEvent.click(screen.getByText('ハイライト有効'));
expect(storage.enableHighlight).toEqual(false);
});
テストの内容解説
素人なりの解説を付けていくと、
まずstorageオブジェクトを作成し、プロパティの値も初期化します。
その状態でコンポーネントのレンダリングを行います。
const storage = new DummyStorage();
storage.highlightWords = 'hoge';
storage.enableHighlight = true;
render(<HighlightSection storage={storage} />);
テキストエリアに指定したテキストが表示されているかテストします。
expect(await screen.findByDisplayValue('hoge')).toBeInTheDocument();
fireEvent.clickを使って ハイライト有効 ボタンをクリックします。
clickメソッドの引数にはヘッドレスブラウザのようにDOMオブジェクトやHTML要素を指定します。
fireEvent.click(screen.getByText('ハイライト有効'));
最後にstorageオブジェクトのプロパティが初期値の true から false に切り替わっていることをテストします。
expect(storage.enableHighlight).toEqual(false);
テスト実行
全体をテストすると時間がかかってしまうので今回はテストしたいテストスイーツがあるフォルダだけ指定して実行します。
$ npm run test src/Section/
> short-cut-extension@1.3.2 test
> npx jest --config src/jest.config.ts src/Section/
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
✓ show component (87 ms)
✓ chage value after click (21 ms)
Test Suites: 1 passed, 1 total
Tests: 2 passed, 2 total
Snapshots: 0 total
Time: 3.357 s, estimated 14 s
Ran all test suites matching /src\/Section\//i.
正常終了！期待したテストになりました！！
false -> true のケース、 true -> false のケースのどちらもテストして、期待した動きになるかどうかをいつでもテストできるようにしたほうが良いですね！
まだまだ続くぞい。
Discussion