jeudi 26 juillet 2018

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

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 Farmers extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      error: false,
      farmer: {
        lastName: "",
        firstName: "",
        email: "",
        phoneNumber: " "
      }
    };
  }
  // sets the state with the selected farmer
  handleFarmerModalOpen = farmer => {
  //
  };

  handleClose = async bool => {
  // 
  };

  handleDropdown = (e, { name, value }) =>
    this.setState(({ farmer }) => ({ farmer: { ...farmer, [name]: value } }));

  handleChange = ({ target: { name, value } }) =>
    this.setState(({ farmer }) => ({ farmer: { ...farmer, [name]: value } }));

  handleSubmit = async () => {
  //
  };

  // delete a famrer
  handleDelete = async () => {
  //
  };

  render() {
    return (
      <div style={styles.container}>
        <List divided verticalAlign="middle" style={styles.list}>
          <Query query={getSiteFarmers} variables=>
            {({ data, loading, error, refetch }) => {
              if (loading) return <Loader />;
              if (error) return <ErrorMessage />;

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

              return data.getSiteFarmers.response
                .map(farmer => (
                  <Farmer
                    farmer={farmer}
                    handleFarmerModalOpen={this.handleFarmerModalOpen}
                    handleSelectFarmer={handleSelectFarmer}
                    selectedFarmers={selectedFarmers}
                  />
                ));
            }}
          </Query>
        </List>
      </div>
    );
  }
}

export default compose(
  graphql(getRoles, { name: "roles" }),
  graphql(deleteFarmer, { name: "delete" }),
  graphql(query),
  graphql(mutation)
)(Farmers);

// The test file

import React from "react";
import { MockedProvider } from "react-apollo/test-utils";
import getSiteFarmers from "path/gql/getSiteFarmers.query";
import { Farmers } from "../Farmers";
import { farmerProps as props } from "./props";

const mocks = {
  request: {
    query: getSiteFarmers,
    variables: {
      siteId: 1
    }
  },
  result: {
    data: {
      response: [
        {
          firstName: "Alex",
          lastName: "Mitchels",
          famerId: 1,
          email: "email",
          time: "time"
        }
      ]
    }
  }
};

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

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

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

});

Aucun commentaire:

Enregistrer un commentaire