在 React 16 中使用 RTL 测试 Material UI Drawer 的关闭逃逸功能

Question

我正在尝试测试 Material UI Drawer。当您按 Esc 键或单击抽屉外部时，它应该关闭。但它失败了。
我正在使用反应测试库进行测试。我创建了一个codesandbox，并且也在使用React 16.9.0。

打开index.js的沙箱

Answer 1

我遇到了同样的问题，我解决它的方法是确保“Escape”键冒泡。另外，为了使您的测试更容易，请为列表内容指定

datat-testid

。您可以称其为

data-testid="list-component"

这是基于您的代码的测试示例：

  it('closes drawer on escape key', () => {
    // render
    const { queryByTestId } = render(<TemporaryDrawer />);

    // open drawer
    fireEvent.click(queryByTestId('right-btn'));
    expect(queryByTestId('list-component')).toBeInTheDocument();

    // close drawer
    fireEvent.keyDown(queryByTestId('list-component'), { key: 'Escape', bubbles: true });
    expect(queryByTestId('list-component')).not.toBeInTheDocument();
  });