Unmount Component Error with React, Jest, and Testing Library

Using the @testing-library/react you can write jsx to test your components.

If you use:

render(
  <>
    <MyComponent />
    <SecondComponent />
  </>
);

You may get an error saying it can’t unmount the component.

Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.

Possibly related to the <></> not properly being a main component for a react tree. Removing or replacing this prevents the error.

render(
  <div>
    <MyComponent />
    <SecondComponent />
  </div>
);

There may be another way to resolve this, but this works if you don’t care about the nesting div.