使用材料UI工具提示测试组件时的行动警告

Question

这是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问题的建议添加了假计时器，但没有帮助。

Answer 1

不必担心该行为警告。它将在下一个版本的React中修复。有关更多信息，请参见此处。

Answer 2

我只是从react＆quot" 16.8.6"更新我的项目。至" 16.9.0"而且我在控制台上仍然有相同的错误...

更新：要解决一些错误，我必须添加act(() => { functionThatUpdateState(); })

对于其他错误，例如使用材料UI工具提示时我必须执行：

beforeEach(() => {
   jest.useFakeTimers();
})
it("should do something", () => {
  act(() => {
     const { getByText } = render(<MyComponent />);
     jest.runAllTimers();
     expect(getByText("hey")).toBeDefined();
  })
});