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

Question

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

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

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

const val = input.node.value;

//val is ''

所有 solutions here 似乎都不起作用..

Answer 1

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

但是，对于下面的代码：

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

这实际上不会更改您的 <input /> 元素的值，而只是使您的 onChange 函数变为运行并提供一个看起来像 {target: {value: 'abc'}}.

想法是您的 onChange 函数会更新您的状态或商店，因此触发此函数应该会导致您的 DOM 被更新。如果您实际上没有使用 input.simulate('change') 定义的 onChange 处理程序，则不会执行任何操作。

因此，如果您的目标是实际设置输入值而不触发 onChange 处理程序，那么您可以使用 JS 手动更新 DOM，例如 wrapper.find('#my-input').node.value = 'abc'; 然而，这是绕过了 React 的渲染周期，如果你做任何事情来触发 re-render.

，你可能会看到这个值 cleared/removed

Answer 2

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

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

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

Answer 3

这对酶 3 和酶 2 都有效：

wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');

.getDOMNode() 可以像酶 2 中的 .node 和酶 3 中的 .instance() 一样使用。

Answer 4

这对我有用..

我更改了输入文本，并更新了值。并且 更新我的 DOM 属性.

.update()

更新后，我正在检查按钮禁用属性输入手机号码长度用例。

const input = MobileNumberComponent.find('input')
input.props().onChange({target: {
   id: 'mobile-no',
   value: '1234567900'
}});
MobileNumberComponent.update()
const Footer = (loginComponent.find('Footer'))
expect(Footer.find('Buttons').props().disabled).equals(false)

Answer 5

如果使用 TypeScript，您可以执行以下操作

wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');

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

Test setting text value with React and Enzyme

javascript

testing

reactjs

enzyme