mercredi 17 juillet 2019

Jest. How to mock "react-event-listener" with default and named export

I upgraded babel in React app to version 7, and also jest and babel-jest to version 24.8.0. After that I get errors:

TypeError: (0 , _reactEventListener.withOptions) is not a function

      214 |         <EventListener
      215 |           target="window"
      216 |           onClick={withOptions(this.hide, { passive: true })}
          |                    ^
      217 |         /> 


In component I am using EventListener component and withOptions function from react-event-listener. Import look like this.

import EventListener, { withOptions } from "react-event-listener";

That is how mock looks like before upgrade babel 7 etc.

import ReactEventListener from "react-event-listener";

jest.mock("react-event-listener", () => props => (
    <div {...props}>ReactEventListener</div>
));

ReactEventListener.withOptions = () => {};

I also tried some solutions from internet like this one:

const mockReactEvenetListener = props => (
    <div {...props}>ReactEventListener</div>
);

jest.mock('react-event-listener', () => ({
    __esModule: true,
    withOptions: () => {},
    default: mockReactEvenetListener
}));

and after that I get different error in tests:

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `AutoComplete`.

      101 |   it("should be working test", () => {
      102 |     const component = renderer
    > 103 |       .create(
          |        ^
      104 |         <AutoComplete
      105 |           placeholder="Text"
      106 |           headerStyle=

Does someone know how should I mock this module?

Aucun commentaire:

Enregistrer un commentaire