act warning when testing component with Material UI Tooltip

user_5364135 0
Viewed 4886

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.

material-ui react-testing-library jestjs reactjs javascript
2 Answers

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

user_10479030

I just update my project from react "16.8.6" to "16.9.0" and I still have the same error on the console...

Update: To fix some of the errors I had to add act(() => { functionThatUpdateState(); })

For other errors like when using Material Ui Tooltip I had to do:

beforeEach(() => {
   jest.useFakeTimers();
})

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