FeatureToggle React Jest - TypeError: Cannot read property 'state' of undefined

275 Views Asked by At

I've got a component that uses featuretoggle-react to render some stuff. For example:

import { On, FeatureToggle } from "featuretoggle-react";

const MyComponent = () => {
    return (
        <FeatureToggle feature="my_feature">
            <On>
                // render whatever
            </On>
        </FeatureToggle>
    )
}

I'm now creating tests using Jest for MyComponent. An example is as follows:

import React from "react";

import { Provider } from "react-redux";
import { On, FeatureToggle } from "featuretoggle-react";
import { store } from "stores";

test("load my component", async () => {
  const mockComponent = () => <div></div>;
  jest.mock("featuretoggle-react", () => mockComponent);
  render(
    <Provider store={store}>
      <FeatureToggle feature="my_feature"> // error is signaled here
        <On>
          <MyComponent />
        </On>
      </FeatureToggle>
    </Provider>
  );

  // assert some stuff but there is an error returning above
});

When I run the above test, I get the resultant error as:

TypeError: Cannot read property 'state' of undefined

If I comment out the <FeatureToggle feature="my_feature"> from within MyComponent (as well as in the test), my tests run successfully, which is why I'm inclined to believe that it is an error thrown because of <FeatureToggle />

I have tried to mock it using

const mockComponent = () => <div></div>;
jest.mock("featuretoggle-react", () => mockComponent);

but I still get the same error.

EDIT: even if I don't mock featuretoggle-react, I still get the same error.

0

There are 0 best solutions below