Let's say I have this functional React component.
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
Now I want to unit test that SomeComponent calls onShow the first time it is rendered.
Is that possible using enzyme?
I have tried implementing two very similar tests, the difference being that the first is using enzyme, the other one using react-testing-library.
The test that uses react-testing-library passes, but the enzyme test fails, even though they test the same code.
Example:
import * as reactTestingLibrary from "react-testing-library";
import * as React from "react";
import * as enzyme from "enzyme";
const SomeComponent = ({ onShow }) => {
React.useEffect(onShow, []);
return <div />;
};
describe("Testing useEffect with enzyme", () => {
it("calls the side effect", async () => {
const aFn = jest.fn();
enzyme.mount(<SomeComponent onShow={aFn} />);
expect(aFn).toHaveBeenCalledTimes(1); // this test fails
});
});
describe("Testing useEffect with react-testing-library", () => {
it("calls the side effect", async () => {
const aFn = jest.fn();
reactTestingLibrary.render(<SomeComponent onShow={aFn} />);
expect(aFn).toHaveBeenCalledTimes(1); // this test passes
});
});
Is there a way to make enzyme execute the hook and pass the test?
"react": "^16.8.6","enzyme": "^3.9.0","react-testing-library": "^7.0.0",,"react-test-renderer": "^16.8.6",