创建快照时 Jest/Enzyme ShallowWrapper 为空

Posted 2023-02-16

【中文标题】创建快照时 Jest/Enzyme ShallowWrapper 为空

【英文标题】：Jest/Enzyme ShallowWrapper is empty when creating Snapshot

【发布时间】：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 并且它通过了，我不知道为什么。

【参考方案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"
    ]