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应该包含一些内容而不是空的。

有人可以告诉我我在做什么错吗？

谢谢

Answer 1

不需要还原版本。跟随官方DOC

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

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

提示：就像将其添加到您的 package.json 一样简单，例如：

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

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

Answer 2

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

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

Answer 3

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

Answer 4

您需要像使用jest-enzyme：

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

Answer 5

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

npm install --save-devase-to-json

一旦安装了酶转json，我们就可以使用以下内容

<table class="table table-bordered">

    <thead>
      <tr style="font-size:13px; text-align: center;">
        <th rowspan="2">1600</th>
        <th rowspan="2" >P1W1</th>
        <th rowspan="2" >TGT</th rowspan="2">
        <th rowspan="2" >LY</th rowspan="2">
        <th colspan="3" scope="colgroup">Variance Vs Target</th>
        <th colspan="3" scope="colgroup">Variance Vs 2018</th>
      </tr>
      <tr>
          <th>Amount</th>
          <th>%</th>
          <th>ppt</th>
          <th>Amount</th>
          <th>%</th>
          <th>ppt</th>
      </tr>
    </thead>
    <tbody>
      <tr style="font-size:12px;">

        <td style="text-align: right;">ADS</td>

        <td style="text-align: right;">23,635</td>

        <td style="text-align: right;">21,676</td>

        <td style="text-align: right;">20,790</td>

        <td style="text-align: right;">1,959</td>
        <td style="text-align: right;">9.0%</td>
        <td></td>

        <td style="text-align: right;">2,845</td>
        <td style="text-align: right;">13.7%</td>
        <td></td>
      </tr>

    </tbody>
  </table>

使用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(); });可以解决同样的问题，但是更喜欢使用上述方法。

Answer 6

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

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

Answer 7

在包装器之后使用debug（）方法

>>>globals()['z'] = 23

>>>z
23

sys.path.insert(1, '/path/to/application/app/folder')
import file1
import file2

sys.path.insert(2, '/path/to/application/app/folder2')
import file3
import file4

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为空

9 个答案: