Open5

Reactテスト How to

いっきゅういっきゅう

コンポーネントテスト

テスト概要では、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()
  })
})
いっきゅういっきゅう

コンポーネントテスト

hover時に色が変わるテストを考えてみる

@testing-library/user-eventを使用し、hover時にwindow.getComputedStyleで変更後の色を取得するテストを書いたが失敗。元の色しか取得できなかった。

色々調べてみた結果、テストコードをかかないほうがよいと判断。

理由は、hover時に色が変化しなかった場合でもアプリとしてエラーにならないため、テストコードを書く価値はないと判断。
確認したい場合、Storybook上で確認する。

参考: https://spectrum.chat/testing-library/general/how-do-i-test-styles-for-hover-events~108403f4-915b-4243-974c-c41af826b91d

いっきゅういっきゅう

コンポーネントテスト

toHaveStyleRuleを使用するケースを考えてみる

色々とテストを書くことができそうであるが、
テストコードを書く価値があると判断できるケースは以下の条件となりそう

  • 引数を受け取る動的なスタイル
  • スタイルが反映されないことにより、アプリが想定された動作ができない

このケースの場合、テストする価値はありそう。
他のMatcherと組み合わせてテストするようなイメージ。

https://github.com/styled-components/jest-styled-components#tohavestylerule

いっきゅういっきゅう

想定したstyleが当たっているかについて、テストコードでもよいかStorybookで確認する考え方もあり得そう。

Storybook

見た目に関することはStorybookで確認

テストコード

テストコードを書く価値があるのかで判断

価値とは?

  • ユーザがサービスを利用できなくなることを回避
    • ロジックテスト
    • スタイルが適用されていないことにより操作できなくなるケースの回避