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

Question

我正在尝试使用Cypry-react单元测试来对我的react组件进行单元测试。

在这个例子中，我有一个Button，它被传递了一个回调函数，以便在单击时执行。我有下面的代码，但在突出显示的行处立即失败。错误消息为expected stub to have been called at least once, but it was never called。

import React from 'react';
import { mount } from 'cypress-react-unit-test';
const Button = ({ onClick }) => (
<button onClick={onClick} data-test-ref="button">
Hello
</button>
);
describe('Button', () => {
it('should call the onClick function', () => {
const onClick = cy.stub();
mount(<Button onClick={onClick} />);
cy.get(`[data-test-ref=button]`).click();
// expect(onClick).to.be.called; // fails
});
});

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

感谢

Answer 1

本质上，expect()是在Cypress命令有机会运行之前执行的。

您需要按照切换规范示例将期望链接到.then()中

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'); 
});
});