「Reactハンズオンラーニング」の感想・備忘録6

管理者

1年前

Reactハンズオンラーニング第2版

posted with ヨメレバ

Alex Banks/Eve Porcello オライリー・ジャパン 2021年08月06日頃

楽天ブックスで見る

Amazonで見る

Kindleで見る

テスト
1. 10.6.2 要素の検索
  1. クエリ関数
2. 10.6.3 イベントのテスト

テスト

10.6.2 要素の検索

Create React Appを使うと@testing-libraryで始まるパッケージがいくつかインストールされる。
@testing-library/reactのrender関数を使うと、要素を検索するためのクエリ関数を使うことができる。
引数にコンポーネントを渡し、戻り値でクエリ関数を受け取る。

import {render} from '@testing-library/react'
// 〜省略〜
const {queryByText} = render(<Sample/>)
const h1 = queryByText(/abcd/)  
expect(h1).toHaveTextContent("abcd")

クエリ関数

getByXxx: 要素がない場合はエラー。複数の要素が見つかった場合もエラー。
queryByXxx: 要素がない場合はnullを返す。複数の要素が見つかった場合はエラー。
getAllByXxx: 要素を配列で返す。要素がない場合はエラー。
queryAllByXxx: 要素を配列で返す。要素がない場合は空配列を返す。

※ xxxにはTextやTestIdが入る（getByText、queryAllByTestIdなど）

const {getAllByText} = render(<Sample/>)
const h3 = getAllByText(/@gmail.com/)
expect(h3.length).toBeGreaterThan(0)

10.6.3 イベントのテスト

fireEventをインポートして、イベントを発生させる。
以下の例では、getByLabelTextとgetByTestIdで要素を取得し、fireEvent.click()に渡すことでクリックイベントを発生させている。

import {render, fireEvent} from '@testing-library/react'
import Reducer from "./Reducer"

test("checkbox event test", () => {
  const {getByLabelText, getByTestId} = render(<Reducer/>)
  const checkbox = getByLabelText("OFF")
  fireEvent.click(checkbox)
  expect(checkbox.checked).toEqual(true)
  
  const button = getByTestId("toggle")
  fireEvent.click(button)
  expect(checkbox.checked).toEqual(false)
})

import {useReducer} from 'react'

function Reducer() {
  const [checked, toggle] = useReducer(checked =>{
    return !checked
  }, false)
  return (
    <div>
      <h2>Reducer.js</h2>
      <label><input type="checkbox" checked={checked} onChange={toggle}/>{checked ? "ON" : "OFF"}</label>
      <button type="button" onClick={toggle} data-testid="toggle">toggle</button>
    </div>
  );
}

export default Reducer