反应酶 onclick 期望“onclick 被调用！”答案

【问题标题】：React Enzyme onclick expect "onclick was called!"反应酶 onclick 期望“onclick 被调用！”
【发布时间】：2021-09-24 03:40:36
【问题描述】：

我想模拟单击按钮并期望调用 onclick。

当前结果失败 //expect(wrapper.instance().onclick().called).to.be.equal(true) FAILED jsx

const DeselectAll = (props: Props) => (
  <div className="deselectall">
    <Button
      className="deselectall--button"
      icon="minus"
      onClick={props.clearItems}
      text={translate("deselectall")}
    />
  </div>
);

测试

function MySpy() {
  this.calls = 0;
}

  MySpy.prototype.fn = function () {
    return () => this.calls++;
  }

  When(/^Deselect all button is clicked$/, function () {
       const mySpy = new MySpy();
    const mockCallBack = mySpy.fn();

    const button =     const mySpy = new MySpy();
    const mockCallBack = mySpy.fn();

    const button = React.createElement(componentName, { onClick: 
                                                            mountCallBack});
    const childBtn = button.find('.whiteboardarea__deselectall--button');
    console.log("deselectall button found ??? ==== " + childBtn.exists());
    button.props.onClick();
    console.log("if it works ==== " + expect(mySpy.calls).to.be.equal(1));
    return true;
  });

【问题讨论】：

应该wrapper.instance().onclick().called 是wrapper.instance().onClick().called？
@DrewReese 我试过但这是结果。错误：单击取消全选按钮时：错误：wrapper.instance(...).onClick 不是函数
@DrewReese 我想这不是检查的方法。我不知道如何检查。
您可以尝试模拟clearItems 回调函数，模拟单击按钮，并断言回调被调用。您的测试基本上是在测试 Button 是否已将 onClick 属性正确连接到底层 DOMNode，但您正在尝试测试 DeselectAll 组件代码/逻辑。
@DrewReese 你能用代码显示吗

标签： javascript reactjs enzyme spy

【解决方案1】：

看起来你的尝试很接近。您仍然需要使用 Enzyme 并挂载 DeselectAll 被测组件。将模拟回调传递给 DeselectAll 组件的 clearItems 属性，以便按钮有可用的回调。

function MySpy() {
  this.calls = 0;
}

MySpy.prototype.fn = function () {
  return () => this.calls++;
}

When(/^Deselect all button is clicked$/, function () {
  const mySpy = new MySpy();
  const mockCallBack = mySpy.fn();

  const wrapper = enzyme.mount(
    <DeselectAll clearItems={mockCallBack}/>
  );

  const deselectBtn = wrapper.find('.deselectall--button').first();

  // Test that the button is truthy
  expect(deselectBtn).to.have.length(1);

  // simulate the click
  deselectBtn.props().onClick();

  // Test the output
  return expect(mySpy.calls).to.be.equal(1);
});

如果这仍然不起作用，那么我怀疑代码可能无法正确模拟点击。如果是这种情况，我仍然会尽我所能提供帮助，但请记住，我对 Enzyme 有点生疏，而且您似乎有一个奇怪的测试设置/配置。

【讨论】：