使用 React 和 Enzyme 测试设置文本值

Question

如何设置文本输入的文本，然后使用 React / Enzyme 测试它的值？

 const input = wrapper.find('#my-input');

input.simulate('change',
  { target: { value: 'abc' } }
);

const val = input.node.value;

//val is ''

这里的所有解决方案 似乎都不起作用..

原文由 GN. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要真正了解您的代码中发生了什么，查看您的组件代码（特别是您的 onChange 处理程序）会很有用。

但是，关于以下代码：

 input.simulate('change', {target: {value: 'abc'}});

这实际上不会改变你的值 <input /> 元素，相反它只会导致你的 onChange 函数运行并提供一个事件对象，看起来像 {target: {value: 'abc'}} 。

这个想法是你的 onChange 函数会更新你的状态或存储，所以触发这个函数应该会导致你的 DOM 被更新。如果您实际上没有使用 onChange 处理程序 input.simulate('change') 将不会执行任何操作。

因此，如果您的目标是实际设置输入的值而不触发 onChange 处理程序，那么您可以使用 JS 手动更新 DOM，使用诸如 wrapper.find('#my-input').node.value = 'abc'; 但是这是规避React 的渲染周期，如果您执行任何触发重新渲染的操作，您可能会看到该值被清除/删除。

原文由 levi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我在这里使用 React 16 和 Enzyme 3.10 这对我来说完全有效（在尝试了太多不同的建议之后）：

 wrapper.find("input").instance().value = "abc";

显然，在以前的版本中，您可以使用 node 或 getNode() 而不是 instance() ，这是我之前许多尝试的一部分。

原文由 leandroico 发布，翻译遵循 CC BY-SA 3.0 许可协议