TypeScriptのgetByText()について

getByText()とは

Testing Libraryの一部であり、ReactのUIコンポーネントをテストする際に テキスト要素を取得する関数 のことです。

getByText()の使用方法

/** * @jest-environment */

import renderer from 'react-test-renderer'
import { render, fireEvent } from '@testing-library/react'
import { Button } from './Button' 

describe('Button', () => {
  it('changes the button text upon clicking the button using React Testing Library', () => {
    const button = render(<Button />)
    fireEvent.click(button.getByText('ON'))
    expect(button.getByText(/OFF/i)).toBeTruthy()
    fireEvent.click(button.getByText('OFF'))
    expect(button.getByText(/ON/i)).toBeTruthy()
  })
})

感想

よく使う関数だと思うので、すぐに用法が浮かぶようにします。