柏树函数mock类似于jest.fn

Question

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

在Jest中，我可以这样做

const hideMock = jest.fn();
renderWithProviders(
<EmployeeCreationWizard
hide={hideMock}
isVisible={true}
employeeId={123}
/>,
);
await cancel();
expect(hideMock).toBeCalledTimes(1);

我如何用柏树间谍做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()，因为您只想检查是否调用了click处理程序。

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