測試 onOk / onCancel | Ant 設計 [antd]

Question

有什么辦法可以測試onOk和onCancel嗎？ 我已經嘗試使用fireEvent.keyDown測試 onCancel，但它沒有像我預期的那樣工作。

 <>
  <AntdModal
    data-testid="modal-window"
    width={583}
    visible={visible}
    onOk={() => setVisible(false)}
    onCancel={() => setVisible(false)}
    closable={false}
    header={null}
    footer={null}
  >
    <span className="modal-header">
      {headerText}
    </span>
    {children}
  </AntdModal>
</>

我想測試這個的主要原因是因為我需要覆蓋我的測試超過 80%...

覆蓋結果

*.test.js:

  it('should modal disappear after cancel click', async () => {
    const { container } = render(
      <ModalWindow headerText="header" setVisible={jest.fn} visible>
        <div>children</div>
      </ModalWindow>,
    );

    const modal = screen.getByTestId('modal-window');
    expect(modal).toBeInTheDocument();

    fireEvent.keyDown(container, {
      key: 'Escape',
      code: 'Escape',
      keyCode: 27,
      charCode: 27,
    });

    await waitFor(() => {
      expect(modal).not.toBeInTheDocument();
    });
  });

Answer 1

如果它只是關於代碼覆蓋率（並且在您的情況下是關於代碼氣味），我建議將() => setVisible(false)聲明為常量。 這將減少（可能產生錯誤的）代碼重復，並且您不需要在代碼中測試外部庫。