Jest/Enzyme创建快照时，ShallowWrapper为空

Question

所以我正在为我的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应该在其中包含一些内容，而不是为空...。

据我所知，ShallowWrapper应该在其中包含一些内容，而不是为空...

- dragi

---

看起来使用 mount 而不是 shallow 会让你更开心。 - Alejandro

@Alex 不是关于挂载/浅层的。 - maracuja-juice

@Alez，我在测试中将shallow更改为mount并转换为函数组件后，测试通过了，但我不知道原因。 - Mrmld Sky

Answer 1

如果使用 jest v24，则需要像https://github.com/adriantoine/enzyme-to-json这样的快照序列化器。

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

- Titenis

---

这在我的环境中无法工作，使用的版本分别为：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，但这并不理想。 - Ben

可以确认使用 jest: 24.1.0，enzyme: 3.4.0，enzyme-adapter-react-16: 1.2.0，enzyme-to-json: 3.4.0 工作正常。应该是被接受的答案。 - Oleg G

Answer 2

不应该需要还原版本。请遵循官方文档

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

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

提示：可以简单地将其添加到您的 package.json 中，例如：

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

很抱歉如果这不是答案。我只是没有看到任何人在这里提到过它，而它可能会帮助像我几分钟前迷路的其他人。

- Uri.Ustrell

---

你可以在 jest.config.js 中设置相同的 snapshotSerializers: ['enzyme-to-json/serializer']。 - igor

这在Jest v26中仍然有效。您必须npm install enzyme-to-json --save-dev（或yarn add），然后上述任何一个都可以使用。 - Stokesified

在文档中它说有一个默认的序列化程序，但是使用这里提到的解决方案后，我的测试通过了。 - Matthis Kohli

Answer 3

您需要像这样使用jest-enzyme:

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

- Jeyhun Ashurbayov

---

1. 添加依赖项 jest-enzyme
2. 在 setupTests.js 中导入它

- undefined

Answer 4

我在更新到jest@24.0.0后遇到了相同的问题。暂时我已经回滚到之前的版本jest@23.6.0，直到我弄清楚发生了什么变化。如果你找到了变化的原因，请在此处发布。

- user2564429

---

就这样了...我昨天通过降级Jest修复了它...很奇怪，但现在它运行良好。 - dragi

降级后仍然面临相同的问题。 - Tzvetlin Velev

如果你使用的是Babel 7版本，回退到Jest 23会完全破坏它，因为它试图调用版本6。 - Ben

请查看Titenis的回答和链接的GitHub问题。 - maracuja-juice

Answer 5

您可以像这样使用mount和debug函数：

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

- samuelgomez

---

可以与Shallow一起使用，但只包含内部组件。 - samuelgomez

你找到解决方法了吗？我也遇到了同样的问题，它只有内部组件而没有任何HTML。 - CHash11

Answer 6

使用包装器后，使用 debug() 方法。

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

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

- user10936510

Answer 7

或许有点晚了，但我通过使用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

- Bujang Pesimis

Answer 8

我遇到了同样的问题，并使用序列化器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() 来解决，但建议使用上面的方法。

- RKM

---

请在下面的 Jest 配置中添加以下内容："snapshotSerializers": ["enzyme-to-json/serializer"]该配置项可能位于 "package.json" 文件中的 "jest" 对象内或 "jest.config.js" 文件中。 - saurabh

Answer 9

分享我的案例：

之前我得到的是：

<ItemCard/> 渲染并匹配快照 1 的 exports = ShallowWrapper {};

我更改了两个地方，使一切都按预期工作：

1. yarn add enzyme-to-json

2. 在 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"
    ]
  }

- felipe muner