我有一个看起来像这样的组件:
export default class RowCell extends Component {
...
render() {
const { column } = this.props;
const colClass = column.toLowerCase();
return (
<td className={`cell cell-row ${colClass === 'someval' ? 'anotherval' : colClass}`}>
{ this.renderAppropriateCell(colClass) }
</td>
);
}
}
我正在测试一个onClick,看看它是否可以在模拟点击时正确触发处理程序。在这种情况下,处理程序正在设置/更新一段状态。
it('Should fire the onClick handler', () => {
const componentWithHandlerWrapper = shallow(
<RowCell {...props} onClick={() => this.setState({ clicked: !this.state.clicked })} />
);
// In this case, we are passing a dummy function that sets a piece of state in the component
const rowCellInstance = componentWithHandlerWrapper.setState({ clicked: false });
expect(rowCellInstance.instance().state.clicked).toEqual(false);
rowCellInstance.simulate('click');
expect(rowCellInstance.instance().state.clicked).toEqual(true);
});
但是我无法让处理程序在组件的浅层渲染上设置/更新状态。最后的期望是失败的,因为1)点击模拟没有正确执行或2)点击模拟工作但不能更新浅渲染的状态?我已经在一个实例上尝试过它而没有运气。
建议表示赞赏。