创建快照时 Jest/Enzyme ShallowWrapper 为空

IT技术 reactjs testing jestjs enzyme snapshot
2021-05-22 02:55:54

所以我正在为我的 Item 组件编写一个测试，我尝试渲染该ItemCard组件，然后使用该包装器创建一个快照，但它返回一个空的ShallowWrapper {}

请查看代码了解更多信息：

项目.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 应该有一些内容而不是空的......

4个回答

对于 jest v24，您需要使用快照序列化程序，例如https://github.com/adriantoine/enzyme-to-json

来源：https : //github.com/facebook/jest/issues/7802

应该不需要恢复版本。遵循官方DOC

您需要将此添加到您的Jest 配置中：

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

线索：可以像将其添加到您的package.json一样简单，例如：

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

对不起，如果这不是答案。我只是看到这里没有人告诉它，几分钟前它必须帮助像我这样的其他迷路者。

更新到 jest@24.0.0 后我遇到了同样的问题我暂时恢复到以前的版本 jest@23.6.0，直到我弄清楚发生了什么变化。如果您发现有什么变化，请在此处发布。

其它你可能感兴趣的问题
上一篇有哪些好的 FOSS 或免费工具可用于编辑 3D 打印的 STL 文件？ 下一篇Makerbot 第 5 代的初始问题是否已解决