コンポーネントテスト

テスト概要では、React Testing Libraryが推奨されている.

Testing Library(React Testing Library)

テストを書く前にguiding-principlesをまず読む必要がありそう。

レンダリングに関してのテストは、インスタンスに関するテストを避け、実際にレンダリングされたDOMをテストする。

いっきゅう

識別しにくいコンポーネントの表示切り替えをテスト

例: ヘッダーによく使用されるメニューボタンのアイコン(☰や×)の表示切り替えテスト

POINT: data-testidでコンポーネントを識別できるようにしておく

※ data属性を使用するため、本番コードにも反映されてしまうが、FAQをみると、babel-plugin-react-remove-propertiesを使用することでdata-testidを削除することが可能

コンポーネント

export const MenuIcon = () => {
  return (<svg data-testid="menu-icon">...</svg>)
}

export const CloseIcon = () => {
  return (<svg data-testid="close-icon">...</svg>)
}

export const MenuButton = () => {
  const [isOpen, setIsOpen] = useState(false)
  const onClick = () => setIsOpen(!isOpen)

  return (
    <button onClick={onClick}>
      {isOpen ? <CloseIcon /> : <MenuIcon />}
    </button>
  )
}

テストコード

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

describe('MenuButton', () => {
  it('初期表示はMenuIconが表示されている', () => {
  　const { queryByTestId } = render(<MenuButton />)
    expect(queryByTestId('menu-icon')).toBeVisible()
    expect(queryByTestId('close-icon')).toBeNull()
  })

  it('clickするとCloseIconが表示されている', () => {
    const { container, queryByTestId } = render(<MenuButton />)
    fireEvent.click(container.firstChild!)
    expect(queryByTestId('menu-icon')).toBeNull()
    expect(queryByTestId('close-icon')).toBeVisible()
  })
})