Jest/Enzyme 创建快照时 ShallowWrapper 为空

Question

所以我正在为我的 Item 组件编写测试，我尝试渲染 ItemCard 组件，然后使用该包装器创建快照，但它 returns 是一个空的 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 应该包含一些内容而不是空的...

Answer 1

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

Answer 2

对于 jest v24，你需要使用像 https://github.com/adriantoine/enzyme-to-json

这样的快照序列化器

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

您需要使用 jest-enzyme 如：

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

Answer 6

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

npm install --save-dev enzyme-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()解决，但更喜欢使用上述方法。

Answer 7

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

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

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

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

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

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

Answer 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

Answer 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"
    ]
  }

Jest/Enzyme 创建快照时 ShallowWrapper 为空

Jest/Enzyme ShallowWrapper is empty when creating Snapshot

testing

snapshot

reactjs

jestjs

enzyme