act warning when testing component with Material UI Tooltip

Question

This is a follow up on https://github.com/mui-org/material-ui/issues/15726#issuecomment-507293766

I have a component Registration which has a button, that is by default is disabled (controlled by clicking a checkbox, accepting terms and conditions), and shows a tooltip message if hovered over, to accept terms and conditions. Below is the result of the test, and the test itself.

√ 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))
      ....

My test (using @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()
})

I added fake timers as suggested on the GitHub issue, but it did not help.

Answer 1

Don't worry about the act warning. It's going to get fixed in the next version of React. See here for more info.