我在测试嵌套组件的事件时遇到了一些问题。 这是我的组件树的样子:
- ModalComponent (Stateful with value for Input and update handler)
- - ModalType (stateless, passes value and update down to input)
- - - Input (stateless)
我在 ModalComponent 中有值状态和更新值的处理程序。此信息通过 Prop 通过 ModalType
传递到我的 Input
元素。
我尝试用 enzyme 安装我的 ModalComponent
,找到我的输入并模拟元素的变化。但这没有用。
当处理程序和状态是上面的 n 个父组件时,测试嵌套组件的最佳策略是什么?
编辑 我在一个单独的空白 React 项目中创建了我的组件的精简演示设置
class App extends Component {
state = {
inputs: {
machineName: 'Empty'
}
}
onChangeHandler = (e) => {
let updatedState = null
console.log(e.target.value, e.target.id);
switch (e.target.id) {
case 'machineName':
updatedState = { ...this.state.inputs, machineName: e.target.value }
this.setState({inputs: updatedState})
break;
default:
break;
}
}
render() {
return (
<div className="App">
<ModalType onChange={this.onChangeHandler} value={this.state.inputs}></ModalType>
</div>
);
}
}
const ModalType = (props) => {
return <Input onChange={props.onChange} value={props.value.machineName}></Input>
}
const Input = (props) => (
<input id="machineName" onChange={props.onChange} value={props.value}></input>
)
我的测试脚本
test('should handle change on input', () =>{
const wrapper = mount(<App/>)
wrapper.setState({inputs: { machineName: 'Empty' }})
wrapper.find('input').simulate('focus')
wrapper.find('input').simulate('change', {target: {value: '123'}})
wrapper.update()
// fails
expect(wrapper.state().inputs.machineName).toEqual('123')
// fails too
expect(wrapper.find('input').props().value).toEqual('123')
})
谢谢!
最佳答案
const wrapper = mount(<ModalComponent />);
const input = wrapper.find('input');
const event = {target: {value: 'testValue'}};
input.simulate('change', event);
上面的代码是一个工作示例,说明如何模拟输入的更改事件。
编辑
您的事件不正确。由于您的处理程序仅在目标 ID 为 machineName 时才会执行某些操作,因此您需要将该 ID 添加到您的模拟事件中。
wrapper.find('input').simulate('change', {target: {value: '123', id: 'machineName'}})
关于reactjs - 在 React 中测试嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54221783/