React Native Unit Testing - Can't access .root on unmounted test renderer

Question

Hello I'm testing my app with react-native-testing-library. When i run test returning test fail How can i solve this? Error is:

Can't access .root on unmounted test renderer
    
There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
Please check if you are using compatible versions of React Native and React Native Testing Library.
    
Can't access .root on unmounted test renderer

React Version : "react": "18.2.0"

React Native Version : "react-native": "0.72.3"

React Native Testing Library Version : "@testing-library/react-native": "^12.2.2"

Testing Library Jest Native Version : "@testing-library/jest-native": "^5.4.3"

I have this test code;

describe('LoginScreen', () => {
  it('should render the LoginScreen component', async () => {
    await act(async () => {
      render(
        <Provider store={store}>
          <LoginScreen />
        </Provider>,
      );
    });

    const loginScreen = getByTestId('login-screen');
    expect(loginScreen).toBeTruthy();
  });
});

Test code result is;

 FAIL  __tests__/login.screen.test.js
  LoginScreen
    ✕ should render the LoginScreen component (5 ms)

  ● LoginScreen › should render the LoginScreen component

    Trying to detect host component names triggered the following error:

    Can't access .root on unmounted test renderer

    There seems to be an issue with your configuration that prevents React Native Testing Library from working correctly.
    Please check if you are using compatible versions of React Native and React Native Testing Library.

       8 |   it('should render the LoginScreen component', async () => {
       9 |     await act(async () => {
    > 10 |       render(
         |             ^
      11 |         <Provider store={store}>
      12 |           <LoginScreen />
      13 |         </Provider>,

      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:52:11)
      at detectHostComponentNames (node_modules/@testing-library/react-native/src/helpers/host-component-names.tsx:27:30)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:49:40)
      at renderInternal (node_modules/@testing-library/react-native/src/render.tsx:32:10)
      at __tests__/login.screen.test.js:10:13
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12
      at callback (node_modules/@testing-library/react-native/src/act.ts:31:24)
      at act (node_modules/react/cjs/react.development.js:2512:16)
      at actImplementation (node_modules/@testing-library/react-native/src/act.ts:30:25)
      at Object.<anonymous> (__tests__/login.screen.test.js:9:14)
      at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
      at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
      at node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
      at Object.<anonymous> (node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        0.931 s, estimated 1 s
Ran all test suites.

I am not sure if you can use `Provider` and `store` like that in your test. Did you try removing that? Make it simpler. — tomwaitforitmy, Aug 30 '23 at 08:00

Mister_CK · Accepted Answer · 2023-08-31T08:12:31.063

you shouldn't have your render inside an act(), and you don't have to await it. If your screen doesn't trigger async functionality, you don't need to make the test async. If you do need to make your test async, you should probably use await waitFor.

Also, toBeTruthy is a bit of a weak check, you probably want toBeVisible() or toBeOnScreen().

I am not sure how you are using your getter, but best practice is to get it from the screen that holds the render. That might be your actual error, since you are trying to get from somewhere else which might be your "unmounted test renderer"

describe('LoginScreen', () => {
  it('should render the LoginScreen component', async() => {
    render(
      <Provider store={store}>
        <LoginScreen />
      </Provider>,
    );

    await waitFor(() => {
      expect(screen.getByTestId('login-screen')).toBeVisible();
    )
  });
});

If the error persists, it might be an error in your versions, but I don't use 0.72 yet, so I am not sure which of those versions work well together. I use:

"react": "18.2.0",
"react-native": "0.70.6",
"@testing-library/react-native": "^11.5.1",
"@testing-library/jest-native": "^5.4.1",

these do work well together.

React Native Unit Testing - Can't access .root on unmounted test renderer

1 Answers1