自分の作った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要素を描画します。(元ソース)
return (
<button className="btn btn-primary w-80" onClick={transitionTo}>
{text}
</button>
);
テキスト表示のテスト getByText
ではまず、ボタンに表示されるテキストが正しく表示されるか？というテストを書いていこうと思います。
/**
* @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
> [email protected] 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
/**
* @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
> [email protected] 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のページでタグを見ながら進めていくと良さそうです。
次回は挙動のテストを書いていきます！
Author And Source
この問題について(自分の作ったChrome拡張にテストを組み込む(4) React-Testing-Libraryを使ったテスト追加編), 我々は、より多くの情報をここで見つけました https://zenn.dev/satoshie/articles/2c593bb5f657f8著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol