reactjs - 使用 [event.target.name] 时反应笑话测试停止工作
问题描述
具有以下组合
constructor(props) {
super(props);
this.state = {
comment: ''
}
}
handleChange = event => {
this.setState({ [event.target.name]: event.target.value })
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<h4>Add a Comment</h4>
<textarea name="comment" onChange={this.handleChange} value={this.state.comment} />
<div>
<button>Submit Comment</button>
</div>
</form>
)
}
写以下内容时不会让我通过测试
it('has a text area where the users can type in', () => {
wrapped.find('textarea').simulate('change', {
target: {value: 'new comment'}
})
wrapped.update()
expect(wrapped.find('textarea').prop('value')).toEqual('new comment')
})
但是当使用下面的句柄变化时,同样的测试通过了
handleChange = event => {
this.setState({ comment: event.target.value })
}
如何在使用 [event.target.name] 时通过此测试
解决方案
您还需要在event.target
对象中具有 name 属性
const event = {target: {name: "somename", value: "somevalue"}};
试试下面,
it("should respond to name change", _ => {
const event = {target: {name: "somename", value: "somevalue"}};
const wrapper = mount(
<Component />
);
const handleChangeSpy = jest.spy(wrapper.instance(), "handleChange");
wrapper.update();
wrapper.ref('somename').simulate('change', event);
expect(handleChangeSpy.calledOnce).to.equal(true);
});
或者如果 Shallow 渲染,
it("should respond to name change", _ => {
const event = {target: {name: "comment", value: "somevalue"}};
const wrapper = shallow(<Component />);
const myTextArea = wrapper.find(#comment);
myTextArea.simulate('change', event);
expect(...);
});
推荐阅读
- c++ - c++ 应用程序在执行递归函数时崩溃
- python - 在没有 Windows 专有工具的情况下向现有 xlsx 添加密码(无人值守)
- c++ - 如何从文件中读取结构指针的动态分配链表?
- vue.js - Vue.js Axios - router.push 不重定向
- visual-studio - Roslyn MSBuild 工作区添加了额外的斜杠?
- bokeh - 显示带有铬嵌入框架的散景图?
- ruby-on-rails - 未找到 Rails Devise Gem Routes
- javascript - SWT 浏览器未在 Eclipse 视图中呈现 Angular 2 页面
- c# - 如何使报表查看器控件以 xls 格式而不是 xlsx 格式导出?
- shell - 获取属于具有多个 DC 的 Cassandra 集群的每个 dc 的节点数的最佳方法是什么?