测试 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)声明为常量。 这将减少（可能产生错误的）代码重复，并且您不需要在代码中测试外部库。