MBP(はてな)

MacBook Pro,iPhone Xs,React

React Testing Library入門

$ 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アプリケーションのテストをしてみた | バシャログ。