如何测试来自chakra-ui的弹出器？

Question

我需要测试一个弹出式从脉轮-ui在一个反应应用程序。我试过用这个。但它找不到罂粟。如果我尝试通过文本，那么我不能断言它是否是可见的。

  it('show a popover when hover terms and conditions', () => {
    render(<SummaryForm />);
    const link = screen.getByText(/terms and conditions/i);

    const popover = screen.getByRole('dialog');

    expect(popover.parentNode).not.toBeVisible();

    userEvent.click(link);

    expect(popover.parentNode).toBeVisible();
  });

Answer 1

尝试使用API接口的隐藏选项

const =screen.getByRole(“对话框”，{隐藏:真})

ChakraUI在具有对话框角色的部分周围呈现包装器div。如果您使用的是测试库，则可以通过使用https://testing-library.com/docs/queries/about#screendebug来看到这一点。请注意，包装器控制上述部分的可见性，该部分以隐藏的形式开始，使用样式元素和aria标记。

使用隐藏选项，您可以查看在可访问性树中不可见的元素。

因为您想测试popover，所以您应该知道在使用jest时有一些修改和检查可见性的问题。

Answer 2

试试toBeInTheDocument()或toMatchSnapshot()