enzymeのsnapshotがShallowWrapper {}になってたときに見る覚書

Jest + enzymeのsnapshot testing便利ですよね。

ただ、設定によってはちゃんとスナップショットが取れていないケースがある様子です。

最近react-test-rendere中心だったのですが、久々にenzyme触ったらハマったので覚書です。

現象

• 1: enzymeでexpect(shallow(<AnyComponent />)).toMatchSnapshot()でスナップショットを作成する。
• 2: tests/snapshots/AnyComponent.test.tsx.snapをひらく
• 3:スナップショットがShallowWrapper {}になっている

何が問題か？

スナップショットとれてません。なのでReactのコードを変更したとしても検知してくれません。

原因

Jestのv24からsnapshot serializerを入れないといけなくなった様子です。

For jest v24 you need to use snapshot serializer like https://github.com/adriantoine/enzyme-to-json

source: https://github.com/facebook/jest/issues/7802

https://stackoverflow.com/a/54552699

対応

シリアライザーをインストールして、Jestで利用するようにしましょう。

$ yarn add -D enzyme-to-json
$ vim package.json
...
  "jest": {
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ],
...

これでスナップショットが記録されるようになります。