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