react native - Cannot read property 'Direction' of undefined, tests only

Question

I just added TouchableOpacity to a component and the app is working fine, but my tests, using react-native-testing-library, fail to run:

  ● Test suite failed to run

    TypeError: Cannot read property 'Direction' of undefined

      at Object.Direction (node_modules/react-native-gesture-handler/Directions.js:3:39)
      at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:1)

I just removed and re-added react-native-gesture-handler with yarn, and ran pod install. Again, the app is working, but the tests fail to run.

I actually get the same error when using <Text onPress={() => onOptionPress(opt)} /> rather than TouchableOpacity.

component:

const SelectOptions = ({ field, dismissOverlay, onOptionPress }) => {
  return (
    <Overlay
      isVisible
      overlayStyle={styles.overlay}
      height={"auto"}
      onBackdropPress={dismissOverlay}
    >
      <View>
        {field.options.map((opt, i) => (
          <TouchableOpacity
            style={styles.option}
            key={i}
            onPress={() => onOptionPress(opt)}
          >
            <Text>{opt}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </Overlay>
  );
};

test:

describe("CardFormView", () => {
  let wrapper, birthdayField;

  beforeEach(() => {
    wrapper = render(
      <React.Fragment>
        <CardFormView form={form} />
      </React.Fragment>
    );
    birthdayField = wrapper.getByText("Add a Birthday Gift Card");
  });

  const message1 =
    "...";
  const message2 =
    "...";

  it("shows the options for a birthday card when clicked", () => {
    fireEvent.press(birthdayField);
    expect(wrapper.getByText(message1)).toBeDefined();
  });

  it("sets an option when clicked", () => {
    fireEvent.press(birthdayField);
    const firstOption = wrapper.getByText(message1);
    fireEvent.press(firstOption);
    expect(wrapper.queryByText(message2)).toBeNull();
    expect(wrapper.getByText(message1)).toBeDefined();
  });
});

Answer 1

This is because you are not mocking the react-navigation-gesture-handler

To use mock of react-navigation-gesture-handler you should add jestSetup.js from node_modules in jest.config.json or jest.config.js

setupFiles: [
  "./node_modules/react-native-gesture-handler/jestSetup.js"
]

I found a reference from the following link and It's working for me.

https://github.com/software-mansion/react-native-gesture-handler/issues/344#issuecomment-489547513