时间戳

首页 > 解决方案 > 使用 Material UI Tooltip 测试组件时发出警告

javascript - 使用 Material UI Tooltip 测试组件时发出警告

问题描述

这是对https://github.com/mui-org/material-ui/issues/15726#issuecomment-507293766的跟进

我有一个Registration带有按钮的组件，默认情况下它是禁用的（通过单击复选框来控制，接受条款和条件），如果将鼠标悬停在上面，则会显示一个工具提示消息，以接受条款和条件。以下是测试结果和测试本身。

√ without consent, cannot go further (190ms)

  console.error node_modules/react-dom/cjs/react-dom.development.js:506
    Warning: An update to ForwardRef(Popper) inside a test was not wrapped in act(...).        
    When testing, code that causes React state updates should be wrapped into act(...):
        act(() => {
      /* fire events that update state */
    });
    /* assert on the output */
        This ensures that you're testing the behavior the user would see in the browser. Learn more at ...
        in ForwardRef(Popper) (created by Tooltip)
        in Tooltip (created by WithStyles(Tooltip))
      ....

我的测试（使用@testing-library/react）：


jest.useFakeTimers()
it('without consent, cannot go further', () => {
  const {getByText} = render(<Registration/>)
  const loginButton = getByText(/Log in/)
  act(() => {
    fireEvent.mouseEnter(loginButton)
    jest.runAllTimers()
  })
  expect(getByText(/Please accept our terms and conditions/)).toBeInTheDocument()
})

我按照 GitHub 问题的建议添加了假计时器，但没有帮助。

标签： javascriptreactjsjestjsmaterial-uireact-testing-library

解决方案

不要担心行为警告。它将在下一个版本的 React 中得到修复。请参阅此处了解更多信息。

推荐阅读