Invariant Violation: Unable to find node on an unmounted component. Apollo

Question

I have some problems testing a Component inside a Create React App that returns a Query Component, I'm using jest and enzyme for testing. The error that I get is Invariant Violation: Unable to find node on an unmounted component.. Any ideas with what I'm doing wrong? What I'm trying to get is to test that the query component will return an array of components based on the data received from the server.

I tried using the methods posted in this medium article, but I can't get it to work at all.

// The component

export class MyWrapper extends React.Component {
  render() {
    return (
        <List divided verticalAlign="middle" >
          <Query query={query} >
            {({ data, loading, error, refetch }) => {
              if (loading) return <Loader />;
              if (error) return <ErrorMessage />;

              // set refetch as a class property
              this.refetch = refetch;

              return data.response
                .map(el => (
                  <MyComponent
                    el={el}
                  />
                ));
            }}
          </Query>
        </List>

    );
  }
}

export default compose(
 ...//
)(MyWrapper);

// The test file

import React from "react";
import { MockedProvider } from "react-apollo/test-utils";
import query from "path/to/query";
import { MyWrapper } from "../MyWrapper";
import { props } from "./props";

const mocks = {
  request: {
    query,
  },
  result: {
    data: {
      response: [
        // data
      ]
    }
  }
};

describe("<MyWrapper />", () => {
  describe("rendering", () => {
    it("renders <MyComponent />'s", async () => {
      const wrapper = mount(
        <MockedProvider mocks={mocks} removeTypename>
          <MyWrapper {...props} />
        </MockedProvider>
      );

      await new Promise(resolve => setTimeout(() => resolve(), 1000));
      wrapper.update();

      console.log(wrapper.debug());
    });
  });

});

This is the code snippet I tried to reproduce:

const wait = require('waait');

it('should render dog', async () => {
  const dogMock = {
    request: {
      query: GET_DOG_QUERY,
      variables: { name: 'Buck' },
    },
    result: {
      data: { dog: { id: 1, name: 'Buck', breed: 'poodle' } },
    },
  };

  const component = renderer.create(
    <MockedProvider mocks={[dogMock]} addTypename={false}>
      <Dog name="Buck" />
    </MockedProvider>,
  );

  await wait(0); // wait for response

  const p = component.root.findByType('p');
  expect(p.children).toContain('Buck is a poodle');
});

Answer 1

I was getting Invariant Violation: Unable to find node on an unmounted component too with TypeScript and Next.js in the mix.

After creating an isolated project which worked, I knew it had to be my codebase.

The stack trace seemed to stem at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15).

So in my case, upgrading from "react-dom": "16.5.2" to "react-dom": "16.7.0" fixed the issue for me, along with re-creating my yarn.lock file.

Answer 2

After Googling to solve this for myself I found this.

According to this Git Issue the problem is in enzyme-adapter-react-16. EthanJStark said that updating to enzyme version 1.5.0 corrected it. I can confirm that the error stopped.

tldr;
package.json
– "enzyme-adapter-react-16": "^1.1",
+ "enzyme-adapter-react-16": "^1.5.0",