Jest React TypeScript デバッグツール logRoles

概要

デバッグツールとして、ReactTestingLibraryのlogRolesメソッドを導入します。

logRolesでできること

テスト完了時にテスト対象の情報をコンソール上に表示します。
今回の場合に当てはめるとテスト完了時に要素、名前、色をコンソール上に表示します。。

実装

React Testing Libraryの導入

npm install --save-dev @testing-library/react

logRoleの実装

赤色のボタンを作成するコードです。

プロダクトコード

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div >
    <button style={{backgroundColor: 'red'}}>Change to blue</button>
    </div>
  );
}

export default App;

テストコード

ボタンの色が赤色であることを確認するテストコードです。

Rolelog有りの場合

App.test.tsx

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


test('button has correct initial color', () => {
    //コンテナ化する
	const { container } = render(<App />);
	logRoles(container);

    // find an element with a role of button and text of 'Change to blue'
   const colorButton = screen.getByRole('button',{ name:'Change to blue' });

   //　ボタンの初期色が赤色であることを確認
    expect(colorButton).toHaveStyle({backgroundColor: 'yellow'})
});

test('button turns blue when clicked', () => {});

Rolelog無しの場合

App.test.tsx

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


test('button has correct initial color', () => {
	render(<App />);
    // find an element with a role of button and text of 'Change to blue'
   const colorButton = screen.getByRole('button',{ name:'Change to blue' });

   //　ボタンの初期色が赤色であることを確認
    expect(colorButton).toHaveStyle({backgroundColor: 'yellow'})
});

test('button turns blue when clicked', () => {});

動かしたときの挙動

左側側がIDE,右側がreactの様子です。
テストコードのredをyellowに変えてPASS Failを比較しています。コンソール画面に注目

logRoleの場合

logRoleを使っていない場合

二つの比較（静止画）

左側がlogRole有　右側がlogRole無し
Passする場合、logRole有だとボタンの情報が表示されるが、logRoleは表示されない。

Failの場合もPassと類似した結果になりました。

github

参考

section2 14
https://www.udemy.com/course/react-testing-library/

logRoles リファレンス