使用Enzyme测试onClick处理程序 - 无法触发功能

时间:2017-10-06 22:21:35

标签: javascript reactjs enzyme

我有一个看起来像这样的组件:

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)点击模拟工作但不能更新浅渲染的状态?我已经在一个实例上尝试过它而没有运气。

建议表示赞赏。

0 个答案:

没有答案