使用 React 和 Enzyme 测试设置文本值
Test setting text value with React and Enzyme
如何设置文本输入的文本,然后使用 React / Enzyme 测试它的值?
const input = wrapper.find('#my-input');
input.simulate('change',
{ target: { value: 'abc' } }
);
const val = input.node.value;
//val is ''
所有 solutions here 似乎都不起作用..
要真正了解您的代码中发生了什么,查看您的组件代码(特别是您的 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
我在这里使用 React 16
和 Enzyme 3.10
,这对我来说完全有效(在尝试了太多不同的建议之后):
wrapper.find("input").instance().value = "abc";
显然,在以前的版本中,您可以使用 node
或 getNode()
而不是 instance()
,这是我之前许多尝试的一部分。
这对酶 3 和酶 2 都有效:
wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');
.getDOMNode()
可以像酶 2 中的 .node
和酶 3 中的 .instance()
一样使用。
这对我有用..
我更改了输入文本,并更新了值。
并且 更新我的 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)
如果使用 TypeScript,您可以执行以下操作
wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');
如何设置文本输入的文本,然后使用 React / Enzyme 测试它的值?
const input = wrapper.find('#my-input');
input.simulate('change',
{ target: { value: 'abc' } }
);
const val = input.node.value;
//val is ''
所有 solutions here 似乎都不起作用..
要真正了解您的代码中发生了什么,查看您的组件代码(特别是您的 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.
我在这里使用 React 16
和 Enzyme 3.10
,这对我来说完全有效(在尝试了太多不同的建议之后):
wrapper.find("input").instance().value = "abc";
显然,在以前的版本中,您可以使用 node
或 getNode()
而不是 instance()
,这是我之前许多尝试的一部分。
这对酶 3 和酶 2 都有效:
wrapper.find('input').getDOMNode().value = 'new value';
wrapper.find('input').simulate('change');
.getDOMNode()
可以像酶 2 中的 .node
和酶 3 中的 .instance()
一样使用。
这对我有用..
我更改了输入文本,并更新了值。 并且 更新我的 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)
如果使用 TypeScript,您可以执行以下操作
wrapper.find('input').getDOMNode<HTMLInputElement>().value = 'new value';
wrapper.find('input').simulate('change');