🐙
自分の作ったChrome拡張にテストを組み込む(4) React-Testing-Libraryを使ったテスト追加編
JestとReact-Testing-Libraryを使って単体テストをやりたい
このメモの続きです。
対象レポジトリ
テストの追加
React-Testing-Libraryのrenderを使って自作したコンポーネントが期待した表示が行えているのかをテストしていきます。
refs: https://testing-library.com/docs/react-testing-library/api/#render
<LinkButton> として自作したコンポーネントは以下の様なHTML要素を描画します。(元ソース)
LinkButton.tsx
return (
<button className="btn btn-primary w-80" onClick={transitionTo}>
{text}
</button>
);
テキスト表示のテスト getByText
ではまず、ボタンに表示されるテキストが正しく表示されるか？というテストを書いていこうと思います。
__tests__/LinButton.tsx
/**
* @jest-environment jsdom
*/
import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { LinkButton } from '../LinkButton';
test('use jsdom in this test file', () => {
const element = document.createElement('div');
expect(element).not.toBeNull();
});
test('renders a text', () => {
const { getByText } = render(
<LinkButton text={'hoge'} url={'https://example.com'} />
);
expect(getByText('hoge')).toBeInTheDocument();
});
さて実行してみます。
テスト実行
$ 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 (4 ms)
✓ remove duplicate elements
✓ remove duplicate elements (1 ms)
PASS src/Component/__tests__/LinkButton.tsx (10.104 s)
✓ use jsdom in this test file (3 ms)
✓ renders a text (31 ms)
Test Suites: 2 passed, 2 total
Tests: 5 passed, 5 total
Snapshots: 0 total
Time: 18.771 s
Ran all test suites.
あら？あっさり動いた。
さて、ではもっと色々なテストを書いていこうと思います。
「期待した文字が表示されているか？」「クリックした時に期待した挙動をするか？」などなど、テストにはさまざまな観点があります。
タグ要素の表示のテスト getByRole
テキストの表示は確認できたのでボタンが表示されているかも確認していきます。
getByRole はタグの role 要素が存在するかを確認するものです。
refs: ByRole | Testing Library
__tests__/LinButton.tsx
/**
* @jest-environment jsdom
*/
import * as React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { LinkButton } from '../LinkButton';
test('renders a button', () => {
const { getByText, getByRole } = render(
<LinkButton text={'hoge'} url={'https://example.com'} />
);
expect(getByText('hoge')).toBeInTheDocument();
expect(getByRole('button')).toBeInTheDocument();
});
$ 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 (3 ms)
✓ remove duplicate elements (1 ms)
✓ remove duplicate elements (7 ms)
PASS src/Component/__tests__/TabEntry.tsx (6.28 s)
✓ renders a tab (35 ms)
PASS src/Component/__tests__/ImageButton.tsx (6.338 s)
render
✓ should render component (92 ms)
PASS src/Component/__tests__/LinkButton.tsx (6.387 s)
✓ renders a button (94 ms)
Test Suites: 4 passed, 4 total
Tests: 6 passed, 6 total
Snapshots: 0 total
Time: 7.852 s, estimated 17 s
Ran all test suites.
この調子でまずは各コンポーネントの表示テストを書いていきます。
getByRole のテストを書くときには W3C のARIA in HTMLのページでタグを見ながら進めていくと良さそうです。
次回は挙動のテストを書いていきます！
Discussion