web-dev-qa-db-ja.com

スナップショットの作成時にJest / Enzyme ShallowWrapperが空になる

そのため、私のItemコンポーネントのテストを作成していて、ItemCardコンポーネントをレンダリングしてから、そのラッパーを使用してスナップショットを作成しようとしましたが、空のShallowWrapper {}が返されます

詳細についてはコードを参照してください：

Item.test.js

import { shallow } from 'enzyme';
import { ItemCard } from '../Item';

const fakeItem = {
  id: 'aksnfj23',
  title: 'Fake Coat',
  price: '40000',
  description: 'This is suuuper fake...',
  image: 'fakecoat.jpg',
  largeImage: 'largefakecoat.jpg',
};

describe('<ItemCard/>', () => {
  it('renders and matches the snapshot', () => {
    const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);

    // console.log(wrapper.debug());
    expect(wrapper).toMatchSnapshot();
  });
});

それが作成するスナップ：

// Jest Snapshot v1

exports[`<ItemCard/> renders and matches the snapshot 1`] = `ShallowWrapper {}`;

私の知る限り、ShallowWrapperには空ではなくコンテンツが含まれている必要があります。

誰かが私がここで間違っていることを教えてもらえますか？

ありがとう

reactjstestingjestjsenzymesnapshot
15
dragi

[email protected]にアップデートした後、同じ問題に直面しました。変更点がわかるまで、しばらく前のバージョンの[email protected]に戻しました。変更点を見つけたら、ここに投稿してください。

6
user2564429

Jest v24の場合、スナップショットシリアライザを使用する必要があります https://github.com/adriantoine/enzyme-to-json

ソース： https://github.com/facebook/jest/issues/7802

17
Titenis

次のようにjest-enzymeを使用する必要があります。

https://github.com/airbnb/enzyme/issues/1533#issuecomment-479591007

4
Jeyhun Ashurbayov

バージョンを元に戻す必要はありません。公式 [〜＃〜] doc [〜＃〜] をフォローしています

これを Jest構成に追加する必要があります ：

"snapshotSerializers": ["enzyme-to-json/serializer"]

手がかり：package.jsonに追加するのと同じくらい簡単です：

{
  "name": "my-project",
  "jest": {
    "snapshotSerializers": ["enzyme-to-json/serializer"]
  }
}

それが答えでなかったらすみません。私は誰もここでそれを言わなかったのを見ただけで、それは数分前に私のような他の損失を助けるに違いない。

4
Uri.Ustrell

あなたはこのようにマウントとデバッグ機能を使うことができます：

it('Should render Component', () => {
    const wrapper = mount(<Component {...props} />);
    expect(wrapper.debug()).toMatchSnapshot();
  });
3
samuelgomez

ラッパーの後にdebug（）メソッドを使用します

  it('renders and matches the snapshot', () => {
const wrapper = shallow(<ItemCard me item={fakeItem} showButtons />);

// console.log(wrapper.debug());
expect(wrapper.debug()).toMatchSnapshot(); });
1
Shivam

私は同じ問題に直面し、シリアライザー https://github.com/adriantoine/enzyme-to-json を使用して解決しました。

npm install --save-devzyme-to-json

Enzyme-to-Jsonをインストールしたら、以下のようなものを使用できます

_import React, {Component} from 'react';
import {shallow} from 'enzyme';
import toJson from 'enzyme-to-json';

it('renders correctly', () => {
  const wrapper = shallow(
    <MyComponent className="my-component">
      <strong>Hello World!</strong>
    </MyComponent>,
  );

  expect(toJson(wrapper)).toMatchSnapshot();
});

_

同じことはshallow().debug()を使用して解決できますが、上記の方法を使用することをお勧めします。

1
RKM