React Testing Libraryでテスト実装 (Wheather-app実装 5)

こんにちは。kaoruです。

今回はcreate-react-appに最初から実装されているReact Testing Libraryでテスト実装してみます。

【前回】コンポーネントを細分化する (Wheather-app実装 4)

React Testing Libraryって？

create-react-appには最初からJest, React Testing Libraryというテスト実装に必要なライブラリが入っているのです。

概要は別記事を参照ください。

create-react-appで標準搭載のテストライブラリは？

こんにちは。kaoruです。create-react-appが便利そうなので使い始めています。便利なことにテストフレームワークも最初から入っているのです。けれど「Jest と React Testing Libra...

kunsui.me

2020.08.31

React Testing Libraryでテスト実装

まずは動かしてみます

基本的には準備が揃っていて、ミニマムなテストファイルも用意されています。

以下コマンドでいきなりテスト実行もできます。

yarn start

最初にすべきこと

create-react-appのバージョンにも寄ると思うのですが、v3.4.1だとちょっと対応が必要でした。

Qiitaに(初！)投稿したので以下を参照ください。

【Qiita】CRA(v3.4.1)のReact Testing Libraryで最初に対処すること

テスト実装

Commit

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

test('renders learn react link', async () => {
	render(<App />);
	// screen.debug()  //render後のコンポーネントをコンソール出力

	// 画面上テキストのテスト
	expect(screen.getByText('週間天気')).toBeInTheDocument();

	// ボタン + "天気情報" 存在テスト
	expect(screen.getByRole('button', {name: '天気情報'})).toBeInTheDocument();

	// API結果表示領域のdisplay:none 確認
	// （コンポーネント自体の検索はできないのでdata-testid使用
	expect(screen.getByTestId('weatherDays')).toHaveStyle('display:none')  //data-testidは非推奨.

	// ボタン押下 API呼び出し
	userEvent.click(screen.getByRole('button'))
	// API取得の正常結果（"Sun" ~ "Sat"テキストの一部)確認。デフォルト1000msなのでtimeout:3000ms設定
	const result = await screen.findByText('Sun', undefined, {timeout: 3000});
	expect(result).toBeTruthy()

	// （"Sun" ~ "Sat"テキストの一部)確認
	expect(screen.getByText('Mon')).toBeTruthy()

});

結果

所感

では、また〜。