🐙

自分の作ったChrome拡張にテストを組み込む(4) React-Testing-Libraryを使ったテスト追加編

2022/09/22に公開約3,600字

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

https://zenn.dev/satoshie/articles/82a55fc935d0db

このメモの続きです。

対象レポジトリ

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

テストの追加

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のページでタグを見ながら進めていくと良さそうです。

次回は挙動のテストを書いていきます!

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

Discussion

ログインするとコメントできます