小编Obi*_*adi的帖子

如何使用 React 测试库和 Jest 测试必填输入字段?

我尝试通过测试弹出窗口的存在来使用 React 测试库和 Jest 来测试必需的输入字段,但失败了。我尝试了几种变体,但没有一个有效。UI 的步骤如下:

  1. 单击空白字段 清空选择字段
  2. 单击字段旁边(模糊)
  3. 将鼠标悬停在字段上
  4. 获取所需消息所需消息

实现这一点的测试代码是:

  const input = screen.getByRole('textbox', {name: /name \*/i})
  expect(input).toBeTruthy();
  fireEvent.click(input);
  fireEvent.blur(input);
  await waitFor(() => expect(input).toHaveValue(config.EMPTY_STRING));

  act(() => {
    fireEvent.mouseOver(input);
  });

  await waitFor(() => {
    expect(screen.getByText('Name is required')).toBeTruthy();
  });
Run Code Online (Sandbox Code Playgroud)

不幸的是,它不起作用,我收到此错误: TestingLibraryElementError:无法找到带有文本的元素:名称是必需的。这可能是因为文本被多个元素分解。在这种情况下,您可以为文本匹配器提供一个函数,以使您的匹配器更加灵活。

我这样改变了最后一行: expect(screen.getByText('Name is required')).toBeInTheDocument();但得到了同样的错误。

我尝试过 expect(screen.findByText('Name is required')).toBeInTheDocument();但遇到了同样的错误。

我的最后一次尝试是:expect(screen.findByText('Name is required')).toBeTruthy();。这里,现场测试通过了,但整体测试失败了。我得到的错误是:console.error 警告:您似乎有重叠的 act() 调用,这是不支持的。在进行新的调用之前,请务必等待之前的 act() 调用。错误:未捕获 [TypeError:无法读取 null 的属性“useRealTimers”]

所以我被困住了。任何帮助将非常感激。多谢!

reactjs jestjs react-testing-library

5
推荐指数
2
解决办法
2万
查看次数

标签 统计

jestjs ×1

react-testing-library ×1

reactjs ×1