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

Question

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

在本例中，我有一个按钮，它传递一个回调函数以在单击时执行。我有下面的代码，但在突出显示的行处立即失败。错误消息是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()您需要按照切换规范示例将期望链接到 a 内，

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