酶测试包含容器

Posted 2023-02-22

【中文标题】酶测试包含容器

【英文标题】：enzyme test contains for container

【发布时间】：2019-05-12 17:03:40

【问题描述】：

测试容器中存在的组件/元素是否有意义？

我有这个节点

<div className="App">
  <input type="text" onChange=[undefined] />
  <button onClick=[undefined]>
    Add
  </button>
</div>

但是为什么测试失败了？

const wrapper = shallow(<App />);
console.log(wrapper.debug())
expect(
  wrapper.contains('<input type="text" onChange=()=> />')
).toBeTruthy();

https://codesandbox.io/s/rjl3p727wm

【参考方案1】：

这有两个原因：

contains 函数需要传入一个或多个 ReactNode，而不是选择器，这意味着我们必须去掉引号。 ()=> 不等于 undefined，这是 App 组件内部的值。

合并这些更改：

expect(
  wrapper.contains(<input type="text" onChange=undefined />)
).toBeTruthy();

A fork of codesandbox

【讨论】：

感谢您的更正。以我的经验，我总是必须定义onChange=undefined ，因为在一个节点中，它通常会有很多功能道具，如何避免这种情况？一种方法是避免使用包含，也许可以使用.find('inputClass')