render component that set state inside of useEffect at component mount.

Hey, I am trying to test a component that has useEffect and I am setting a state inside of it.

everytime tun the following test

import React from 'react';
import { render } from 'react-native-testing-library';

import { Home } from '../Home';
import { MockedProvider } from '../../core/utils/tests/mockedProvider';

describe('<Home />', () => {
  const { toJSON } = render(
    <MockedProvider>
      <Home />
    </MockedProvider>
  );

  it('should match <HomeScreen /> snapshot', () => {
    expect(toJSON()).toMatchSnapshot();
  });
});

I got the following error

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:104
    Warning: An update to HomeScreen 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 https://fb.me/react-wrap-tests-with-act

however, my test passes and works well. I have searched for a solution for this and did as the error message suggested and wrapped my render method inside of act like the following

import React from 'react';
import { act, render } from 'react-native-testing-library';

import { Home } from '../Home';
import { MockedProvider } from '../../core/utils/tests/mockedProvider';

describe('<Home />', () => {
  it('should match <HomeScreen /> snapshot', async () => {
    let renderedComponent;
    await act(async () => {
      renderedComponent = render(
        <MockedProvider>
          <Home />
        </MockedProvider>
      );
    });
    expect(renderedComponent.toJSON()).toMatchSnapshot();
  });
});

and I ended up with the following error

Error: Can't access .root on unmounted test renderer

at Object.get [as root] (/Users/MuhmdRaouf/mobile-project/node_modules/react-test-renderer/cjs/react-test-renderer.development.js:15901:17)
at render (/Users/MuhmdRaouf/mobile-project/node_modules/react-native-testing-library/build/render.js:1:1517)
at _callee$ (/Users/MuhmdRaouf/mobile-project/src/screens/__tests__/Home-test.js:12:27)
at tryCatch (/Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:45:40)
at Generator.invoke [as _invoke] (/Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:271:22)
at Generator.prototype.<computed> [as next] (/Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:97:21)
  at tryCatch (/Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:45:40)
  at invoke (/Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:135:20)
  at /Users/MuhmdRaouf/mobile-project/node_modules/regenerator-runtime/runtime.js:170:11
  at tryCallTwo (/Users/MuhmdRaouf/mobile-project/node_modules/promise/lib/core.js:45:5)

is there a way to fix this problem, I know it’s harmless for the time being but I wanna know the reason behind it as if I faced the same problem in the future I could be able to overcome it easily.

Thanks in Advance 😄

[thymikee]

Have you seen this? https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning

[LydGol90]

This works for me. I update the state inside useEffect on mount.

  it('should...', async () => {
    const { queryByType } = render(<Screen />);
    await act(async () => flushMicrotasksQueue());
    expect(...)
  });