Jestのスナップショットテストの話

検索するといろいろ方法が出てくるがreact-test-rendererを使って行う記事が多いように思う

Jestの公式ドキュメントにもそういう例が書いてあった

最初は素直に真似ていたがほかにも方法があるようだったのでメモを残しておく

react-test-endererを使う方法

よく記事で出てくるパターン

rendererをimportしてrenderer.create()+toJSON()で生成した値を使用する

import renderer from "react-test-renderer"

...
...
...

    const tree = renderer.create(<Archive data={data}></Archive>).toJSON()
    expect(tree).toMatchSnapshot()

Snapshot Testのドキュメント

Snapshot Testing · Jest

ドキュメントを読んだ

次の箇所

Snapshot Testing · Jest

スナップショットテストの対象について

要はシリアライズされた値であれば何を渡してもOKっぽい

例としてUIテストがケースとして良いので使っているだけってことのよう

スナップショットテストとしては、変更によってスナップショットと差分が出たかどうかだけをチェックしているということ

なので

Testing LibraryのgetBy....で取得できる要素を直接渡してもOK

Testing Libraryのrenderで返ってくる変数のcontainerをそのまま使用してもOK

オブジェクトを渡してもOK

なるほど!これなら活用範囲はほかにもありそうだなという感想を持ったので覚えておこうと思う

Testing Libraryのrenderの返却値で行う方法

本題に戻り、今回はReactのUIテストでクリックだったりイベントをいくつか発行させた後の状態をスナップショットテストしたかった

なのでTesting Libraryで使う値を使ってスナップショットテストを行った

• 例

import { render } from "@testing-library/react"
import userEvent from "@testing-library/user-event"

...
...
...

    const user = userEvent.setup()

...
...
...

    const {
      container,
      getByTestId,
      getAllByTestId,
    } = render(<Search></Search>)

    const searchInput = getByPlaceholderText("Search")
    user.type(searchInput, "Bi")

    expect(container).toMatchSnapshot()

例だとcontainerをスナップショットテストに使用した

イベント発行後のDOMの内容に差分が出てないかをチェックしている