Question

Cypress 函数模拟类似于 jest.fn

2022-11-10

4956

cypress cypress-component-test-runner

我正在 React 中尝试 Cypress 组件测试，我对一些基本的东西有点困惑，比如如何断言点击处理程序。

在 Jest 中，我可以做类似的事情

const hideMock = jest.fn();

renderWithProviders(
    <EmployeeCreationWizard
        hide={hideMock}
        isVisible={true}
        employeeId={123}
    />,
);

await cancel();

expect(hideMock).toBeCalledTimes(1);

如何使用 Cypress 间谍执行 const hideMock = jest.fn(); ？

这就是我得到的

it.only('invoke hide() once upon clicking on cancel button', () => {
    const hideSpy = cy.spy();
    cy.interceptEmployeeCreationWizard();
    cy.mount(
      <EmployeeCreationWizard
        isVisible={true}
        hide={hideSpy}
        employeeId={123}
      />,
    );

    cy.findByTestId('employee-wizard-drawer-cancel').click();
    cy.get('[data-test-id="employee-wizard-drawer-close"]').click();
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    // expect(hideSpy).to.be.calledOnce;
  });

Answer 1

我很少使用组件测试，但使用 spy/stub 应该相对相同。对于您的情况，您需要为 spy/stub 添加一个别名，使用 cy.get('@alias')，然后对其使用 sinon 断言。

我使用 .stub()，因为您只想检查是否调用了点击处理程序。

it.only('invoke hide() once upon clicking on cancel button', () => {
    cy.interceptEmployeeCreationWizard();
    cy.mount(
      <EmployeeCreationWizard
        isVisible={true}
        hide={cy.stub().as('hide')}
        employeeId={123}
      />,
    );

    cy.findByTestId('employee-wizard-drawer-cancel').click();
    cy.get('[data-test-id="employee-wizard-drawer-close"]').click();
    cy.get('@hide').should('have.been.called')
  });