1. ホーム
  2. javascript

[解決済み] Jestでenzyme-to-jsonを設定する

2022-02-16 11:15:54

質問

reactのコンポーネントをjestとEnzymeでテストしようとしています。

特定のテストケースで酵素をjsonにインポートすると、それは動作します。しかし、手動でそれを行う代わりに、私はそれを行うためにjestを構成したいと思います。

すでに "snapshotSerializers" を追加してみています。["enzyme-to-json/serializer"] を追加してみました。 をjestの設定に追加してみましたが、うまくいかないようです。

ラッパーで酵素を使用するようにjestを設定するにはどうすればよいですか?

このコードは動作します

Header.test.js

import React from 'react'
import { shallow } from 'enzyme'
import toJSON from 'enzyme-to-json'
import Header from '../../components/Header'

test('Should render Header correctly', () => {
    const wrapper = shallow(<Header />)
    expect(toJSON(wrapper)).toMatchSnapshot()
})

このコードがうまく動作するように、Jestが私のすべてのラッパーで自動的にenzyme-to-jsonを使用するようにしたい。

ヘッダー.test.js

import React from 'react'
import { shallow } from 'enzyme'
import Header from '../../components/Header'

test('Should render Header correctly', () => {
    const wrapper = shallow(<Header />)
    expect(wrapper).toMatchSnapshot()
})

jest.config.json

{
    "setupFiles": [
        "raf/polyfill",
        "<rootDir>/src/tests/setupTests.js",
    ],
    "snapshotSerializers": ["enzyme-to-json/serializer"]
}

テストスクリプト

"test": "jest --config=jest.config.json"

期待

exports[`Should render Header correctly 1`] = `
<header>
  <h1>
    Title
  </h1>
  <NavLink
    activeClassName="is-active"
    exact={true}
    to="/"
  >
    Home
  </NavLink>
  <NavLink
    activeClassName="is-active"
    to="/create"
  >
    Create
  </NavLink>
</header>
`;

結果

exports[`Should render Header correctly 1`] = `ShallowWrapper {}`;

解決方法は?

jestの設定ファイルに余分な","があったのですが、なぜかコンソールがエラーを検出することができませんでした。

jest.config.json

{
    "setupFiles": [
        "raf/polyfill",
        "<rootDir>/src/tests/setupTests.js", <------- this comma
    ],
    "snapshotSerializers": ["enzyme-to-json/serializer"]
}

カンマを削除して修正