Javascript 如何使用Cypress对React组件调用回调函数进行单元测试

我正在尝试使用来单元测试我的React组件

在这个例子中，我有一个按钮，它通过一个回调函数在单击时执行。我有下面的代码，但在突出显示的行中立即失败。错误消息是

预期存根至少被调用过一次，但从未被调用过

从“React”导入React；
从“cypress react单元测试”导入{mount}；
常量按钮=（{onClick}）=>(
你好
);
描述（'按钮'，（）=>{
它（'应该调用onClick函数'，（）=>{
const onClick=cy.stub（）；
mount（）；
get（`[data test ref=button]`）。单击（）；
//expect（onClick）.to.be.called；//失败
});
});

我做错了什么？如何测试单击按钮时是否执行了onClick prop

---

感谢

实际上，

expect（）

是在Cypress命令运行之前执行的

您需要将expect链接到

。然后（）

，如示例所示

description（'按钮'，（）=>{
它（'应该调用onClick函数'，（）=>{
const onClick=cy.stub（）；
mount（）；
cy.get（`[data test ref=button]`）。单击（）
.然后（（）=>{
expect（onClick）.to.be.called；//成功
});
});
});

或根据示例对存根进行别名

description（'按钮'，（）=>{
它（'应该调用onClick函数'，（）=>{
const onClick=cy.stub（）.as（'my-button'）；
mount（）；
get（`[data test ref=button]`）。单击（）；
cy.get（“@my button”）。应该（'have.been.called'）；
});
});

您好，您确定用户界面上的

单击功能是否正常工作？如果是，则可以使用
cypress react选择器
验证某个道具的新值。您可以在这个示例中列出Hello。在
expect
语句未注释的情况下，测试会立即失败，甚至不会呈现UI。
describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub();

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click()
    .then(() => {
      expect(onClick).to.be.called; // succeeds
    });

  });
});

describe('Button', () => {
  it('should call the onClick function', () => {
    const onClick = cy.stub().as('my-button');

    mount(<Button onClick={onClick} />);
    cy.get(`[data-test-ref=button]`).click();

    cy.get('@my-button').should('have.been.called'); 
  });
});