$ cd github
$ npx create-react-app testing-react
$ cd testing-react
$ npm run start
control + c
$ npm test
test.jsで終わるファイルが実行される
$ vi src/App.test.js して、下記のように変更
import React from 'react'; import { render, screen } from '@testing-library/react'; import App from './App'; describe('App', () => { test('renders App component', () => { render(<App />); screen.debug(); screen.getByText('Learn React'); screen.getByText(/Learn React/); //screen.getByRole(''); }); });
screen.debug(); でHTMLを出力
'Learn React' 完全一致のテスト
/Learn React/ 正規表現部分一致テスト
screen.getByRole(''); 利用できないrole '' を指定すると、利用可能な全てのroleを表示する。
$ npm test
利用可能な全てのroleを表示
React Testing Libraryの使い方 - Qiita
Step by Stepで学ぶReact Testing Library 入門 - Qiita
React Testing Libraryとjestを使ってReactアプリケーションのテストをしてみた | バシャログ。