创建快照时 Jest/Enzyme ShallowWrapper 为空答案

【问题标题】：Jest/Enzyme ShallowWrapper is empty when creating Snapshot创建快照时 Jest/Enzyme ShallowWrapper 为空
【发布时间】：2019-06-22 11:30:52
【问题描述】：

所以我正在为我的 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 应该有一些内容而不是空的......

【问题讨论】：

看起来mount而不是shallow会让你开心
@Alex 否。这与 mount/shallow 无关。
@Alez 我在测试函数组件时从shallow 更改为mount 并且它通过了，我不知道为什么。

标签： reactjs testing jestjs enzyme snapshot

【解决方案1】：

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

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

【讨论】：

这不适用于jest: 24、enzyme: 3.9.0、enzyme-adapter-react-16: 1.11.2、enzyme-to-json: 3.3.5。我已经在package.json 中安装并配置了enzyme-to-json，但在快照代码中仍然得到一个空的ShallowWrapper。 :( 唯一有效的是使用可靠的旧react-test-renderer，这并不理想。
可以确认与jest: 24.1.0、enzyme: 3.4.0、enzyme-adapter-react-16: 1.2.0、enzyme-to-json: 3.4.0合作。应该是公认的答案

【解决方案2】：

应该不需要还原版本。关注官方DOC

您需要将此添加到您的Jest configuration：

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

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

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

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

【讨论】：

你可以在 jest.config.js 中设置同样的snapshotSerializers: ['enzyme-to-json/serializer'],
这在 Jest v26 中仍然有效。你必须npm install enzyme-to-json --save-dev（或yarn add），然后以上任何一个都可以。
它的文档说它有一个默认的序列化程序，但使用这里提到的解决方案，我的测试通过了。

【解决方案3】：

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

【讨论】：

就是这样...我昨天刚刚通过降级 Jest 修复了它。这很奇怪，但现在可以正常工作了。
降级后仍面临同样的问题
恢复到 Jest 23 如果您使用的是版本 7，则会完全中断 Babel，因为它会尝试调用版本 6。
查看 Titenis 的答案和链接的 GitHub 问题。

【解决方案4】：

你需要使用jest-enzymelike：

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

【讨论】：

【解决方案5】：

你可以像这样使用挂载和调试功能：

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

【讨论】：

也适用于 Shallow，但只包含内部组件
你找到解决办法了吗？我也面临同样的问题，它只有innerComponent，里面没有任何html。

【解决方案6】：

在包装器之后使用 debug() 方法

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

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

【讨论】：

【解决方案7】：

我遇到了同样的问题并使用序列化程序https://github.com/adriantoine/enzyme-to-json 解决了。

npm install --save-dev 酶转json

一旦安装了酶转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()解决，但更喜欢使用上述方法。

【讨论】：

还在 jest 配置中添加以下内容： "snapshotSerializers": ["enzyme-to-json/serializer"] 它可能在 "jest" 对象内的 'package.json' 文件中或在 'jest. config.js 文件。

【解决方案8】：

也许有点晚了，但我设法通过使用https://enzymejs.github.io/enzyme/docs/api/ShallowWrapper/getElement.html 解决了这个问题

describe("Button", () => {
  it("should render basic button correctly", () => {
    const tree = shallow(<Button></Button>);
    expect(tree.getElement()).toMatchSnapshot();
  });
});

这项工作在 Jest 26.5.3 和 enzyme 3.10.5

【讨论】：

【解决方案9】：

只是分享我的案例：

在我得到它之前：

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

我更改了 2 个地方以使一切按预期工作：

纱线添加酶到json
将此行添加到 package.json 中的 JEST 配置中：

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

这是我的 package.json：

"dependencies": {
    "next": "11.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@babel/preset-env": "7.14.5",
    "@babel/preset-react": "7.14.5",
    "@types/jest": "^26.0.23",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
    "babel": "^6.23.0",
    "babel-jest": "^27.0.2",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.2",
    "eslint": "7.29.0",
    "eslint-config-next": "11.0.0",
    "jest": "^27.0.4"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/setupTests.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
      "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
    },
    "snapshotSerializers": [
      "enzyme-to-json/serializer"
    ]
  }

【讨论】：