mardi 19 mars 2019

Testing React context with Enzyme

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