web-dev-qa-db-fra.com

Violation invariante: Impossible de trouver un noeud sur un composant non monté. Apollon

J'ai quelques problèmes pour tester un composant dans une application Create React qui renvoie un composant de requête. J'utilise jest et enzyme pour les tests. L'erreur que je reçois est Invariant Violation: Unable to find node on an unmounted component.. Des idées avec ce que je fais mal? Ce que j'essaie d'obtenir, c'est de tester que le composant de requête renvoie un tableau de composants basé sur les données reçues du serveur. 

J'ai essayé d'utiliser les méthodes décrites dans cet article moyen , mais je ne peux pas le faire fonctionner du tout.

// 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());
    });
  });

});

Voici l'extrait de code que j'ai essayé de reproduire: 

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');
});
testingjestjsenzymeapolloapollo-client
9
Cristian Florea

Après avoir recherché cela par moi-même, j'ai trouvé ceci.

Selon this Git Issue, le problème est dans enzyme-adapter-react-16. EthanJStark a déclaré que la mise à jour vers la version 1.5.0 de l'enzyme l'avait corrigé. Je peux confirmer que l'erreur s'est arrêtée.

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

2
kalm42

Je recevais aussi Invariant Violation: Unable to find node on an unmounted component avec TypeScript et Next.js dans le mélange.

Après avoir créé un projet isolé qui fonctionne, je savais que ce devait être ma base de code.

La trace de la pile semblait être liée à at invariant (node_modules/react-dom/cjs/react-dom.development.js:55:15).

Donc, dans mon cas, la mise à niveau de "react-dom": "16.5.2" vers "react-dom": "16.7.0" a résolu le problème, ainsi que la recréation de mon fichier yarn.lock.

0
Leo