[解決済み] 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"]
}
カンマを削除して修正
関連
-
[解決済み] 解決済み】clearInterval()が動作しない [重複] [重複]
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] なぜGoogleはJSONレスポンスにwhile(1);を前置するのでしょうか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptで要素のクラスを変更するにはどうすればよいですか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] jQueryで要素にスクロールする
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】JavaScriptのgetElementByNameが機能しない
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】DOMException: サポートされているソースが見つからなかったため、読み込みに失敗しました。
-
[解決済み】FirefoxでGoogle Maps V3をリモートで使用すると「googleが定義されていません」と表示される。
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み】Vueが定義されていない
-
[解決済み】module.exports "モジュールが定義されていません"