テスト
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
コメント