Unable to find node on an unmounted component.

[Doaa-Ismael]

I wrote this test and it worked perfectly

describe('test', () => {
    it( 'should render all text', () => {
       const {getByText, getByTestId, debug} = render(
          <View>
            <View><Text>test1</Text></View>
            <View><Text>test2</Text></View>
            <View><Text>test3</Text></View>
          </View>
      });
});

I wanted to test each text alone so I edited the code to be like this .. I expected to work but it gave me this error

describe('test', () => {
      const {getByText, debug} = render(
          <View>
            <View><Text>test1</Text></View>
            <View><Text>test2</Text></View>
            <View><Text>test3</Text></View>
          </View>
      });
   it('should render test1', () => {
       debug();
        expect(getByText('test1')).toBeTruthy();
    });

   it('should render test2', () => {
       debug(); // return null
        expect(getByText('test2')).toBeTruthy(); // fails
    });

   it('should render test13, () => {
       debug(); // return null
        expect(getByText('test3')).toBeTruthy(); // fails
    });
});

Versions

npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.5 => 0.61.5
react-native-testing-library: ^1.13.0 => 1.13.0
react-test-renderer: ^16.13.1 => 16.13.1

[thymikee]

It sounds like you're using RNTL v2, which runs cleanup() after each test. You'll need to move your render call to the test functions, even if it means more code to run – it's for the safety of running your component tests in isolation.

[marklanham]

One thing to check is that you’re using the latest syntax as shown here, this has caught me out before:
https://testing-library.com/docs/react-native-testing-library/example-intro/

The other thing thats caught me out a few times where I've needed to write multiple tests for a single component thats also thrown the error Unable to find node on an unmounted component was due to me placing the render function on the outside of the it function. It should in fact be inside the actual test itself, so for example if you're using describe and it then it should be like this:

import React from 'react';
import { render, screen } from '@testing-library/react-native';
import { ExampleComponent } from './ExampleComponent';

const props = {
  title: 'Example Title',
  body: 'Example body text',
};

describe('Example Component', () => {
  it('should match snapshot', async () => {
    render(<ExampleComponent {...props} />);
    expect(screen.toJSON()).toMatchSnapshot();
  });

  it('should render title', async () => {
    render(<ExampleComponent {...props} />);
    const exampleComponentTitle = await screen.findByTestId('example-component-title');
    expect(exampleComponentTitle).toBeDefined();
  });

  it('should render body', async () => {
    render(<ExampleComponent {...props} />);
    const exampleComponentBody = await screen.findByTestId('example-component-body');
    expect(exampleComponentBody).toBeDefined();
  });
});

[mdjastrzebski]

True, you definitely need to put render inside the test or it and not outsideof them (e.g. in describe).

[tamlyn]

For the benefit of anyone coming here from Google, I had the same problem but it was caused by some unawaited findBys.

Note that regarding putting the render inside the test, it's also fine to put it in a beforeEach 👍