Having some bad luck testing a React component that uses Context.Consumer in an Enzyme test suite.
SideWrapper component:
const SidebarWrapper = props => (
<SidebarContext.Consumer>
{({ sidebar: { Component, isOpen, close } }) => (
<OnOutsideClick
onClick={event => {
/* this class is added to hamburger menu to avoid opening + closing at the same time */
if (!event.target.className.includes("override-outside-click")) {
close();
}
}}
>
<div className={classNames("sidebar", { "sidebar--open": isOpen })}>
<Component />
</div>
</OnOutsideClick>
)}
</SidebarContext.Consumer>
);
Bare minimum to show problem:
describe("<SidebarWrapper />", () => {
it("test", () => {
const app = mount
(
<SidebarWrapper />
);
expect(app.find(".sidebar"));
});
});
Result is "TypeError: Cannot read property 'Component' of undefined". Provider already has a default "Loading" Component, the problem isn't there.
Also tried using babel-rewire-plugin to mock SidebarContext with a dummy component, the error I get then is:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
My package.json has:
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"react": "^16.8.4",
"react-dom": "^16.8.4"
Any idea how to get this to work?
Aucun commentaire:
Enregistrer un commentaire