如何在没有快照的情况下使用 jest 测试生成的 html

Question

我正在尝试测试一些动态创建的 html。 目前，我必须创建一个快照并将生成的块和预期的块与快照匹配。

我想做的只是在没有快照的情况下比较预期和生成的块，就像这样：

test('should create div elements', () => {
  const expectedElements = <div><div key={1}>test</div></div>;
  const generatedElements = [<div key={1}>test</div>];
  const op = <div>{generatedElements}</div>;
  expect(op).toEqual(expectedElements);
});

此操作失败并显示以下消息：

Compared values have no visual difference.

  at Object.<anonymous>.test (src/App.test.js:8:14)
      at new Promise (<anonymous>)
  at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at <anonymous>
  at process._tickCallback
  at process._tickCallback (internal/process/next_tick.js:188:7)_

我做错了什么？

Answer 1

你可以用酶之类的东西来测试一下。

浅

浅渲染有助于限制您将组件作为一个单元进行测试，并确保您的测试不会间接断言子组件的行为。 http://airbnb.io/enzyme/docs/api/shallow.html

或安装完整渲染：

完整的 DOM 渲染非常适合您拥有可能与 DOM API 交互的组件，或者可能需要完整生命周期才能完全测试组件（即 componentDidMount 等）的用例。 http://airbnb.io/enzyme/docs/api/mount.html

我更喜欢使用 shallow，因为我可以测试组件是否存在。在内部组件中，我通常使用 mount 来查看我的标签是否在那里并且工作正常。