jest support: ReanimatedEventEmitter throws in a global scope when touched with jest

The following line of code is dangerous in a jest environment: https://github.com/kmagiera/react-native-reanimated/blob/3f9f5cca3bd7867cf9e17147f5e9200567f0cdda/src/ReanimatedEventEmitter.js#L4

Scenario:

I upgraded react-navigation-tabs to a version that started including this library.

Immediately any of my unit tests that happened to import my navigation stack triggered crashes even though I wasn’t actually using react-navigation-tabs in my tests.

Callstack

      at invariant (node_modules/react-native/node_modules/fbjs/lib/invariant.js:40:15)
      at new NativeEventEmitter (node_modules/react-native/Libraries/EventEmitter/NativeEventEmitter.js:36:36)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/ReanimatedEventEmitter.js:4:1)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/core/AnimatedCall.js:1:824)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/base.js:8:44)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/Easing.js:1:411)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/Animated.js:2:38)
      at Object.<anonymous> (node_modules/react-navigation-tabs/src/views/BottomTabBar.js:11:53)

In a jest environment, obviously NativeModules has nothing in it.

Proposal

If we change the EventEmitter to lazily create on first access, this would be safer, possibly?

export default {
  get emitter() {
    delete this.emitter;
    return this.emitter = new NativeEventEmitter(ReanimatedModule);
  }
}

Thoughts?

[fbartho]

I feel foolish for not figuring this out before now, but the following lines of code in my beforeAll.js setup script were all that was required (as of the current version of the library:

jest.mock("react-native-reanimated", () =>
	jest.requireActual("../../node_modules/react-native-reanimated/mock"),
);

Maybe we should add this line to the README or docs somewhere?

[mralj]

I have managed to mock it successfully 😁 The problem with mock from above is that I forgot to mock View. Working mock looks like:

import { View } from "react-native";

jest.mock("react-native-reanimated", () => {
  return {
    Value: jest.fn(),
    event: jest.fn(),
    add: jest.fn(),
    eq: jest.fn(),
    set: jest.fn(),
    cond: jest.fn(),
    interpolate: jest.fn(),
    View: View,
    Extrapolate: { CLAMP: jest.fn() }
  };
});