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

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

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

1 个答案: