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:

Answer 1

In my case, I was using react-native-cli when encountered this problem. I removed it and installed @react-native-community/cli instead. It fixed everything!

Answer 2

This is happening because you have to mock the NativeModules module from react-native. It can happen with several modules but it was happening to me specifically with the ImagePicker, Linking and @react-navigation/native. This is what I did to mock the native modules.

/src/testSetup.ts

import {NativeModules} from 'react-native';

NativeModules.RNGestureHandlerModule= {
    attachGestureHandler: jest.fn(),
    createGestureHandler: jest.fn(),
    dropGestureHandler: jest.fn(),
    updateGestureHandler: jest.fn(),
    State: {},
    Directions: {},
},

NativeModules.ImagePickerManager = {
    showImagePicker: jest.fn(),
}

NativeModules.Linking = {
    canOpenUrl: jest.fn().mockResolvedValue(true),
    openUrl: jest.fn().mockResolvedValue(true)
}

NativeModules.Platform = {
    OS: 'iOS'
}

jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper');
jest.mock('react-native/Libraries/Animated/src/animations/TimingAnimation');


const mockNavigation = () => {
    const mockedNavigate = jest.fn();
    const mockedAddListener = jest.fn();

    jest.mock('@react-navigation/native', () => ({ // @ts-ignore
        ...(jest.requireActual('@react-navigation/native')),
        useNavigation: () => ({
          navigate: mockedNavigate,
          addListener: mockedAddListener
        })
      }));
    
    return {mockedNavigate, mockedAddListener}
}

in your tests

import { fireEvent, act, render } = '@testing-library/react-native'

const {mockedNavigate, mockedAddListener} = mockNavigation()

test('Should navigate', () => {
  const { queryByText } = render(<Component />)

  fireEvent.press(getByText('View Page Button'))

  expect(mockedNavigate).toHaveBeenCalledWith('Your Page Name')
  expect(mockedAddListener).toHaveBeenCalled()
})

Answer 3

For me just adding the setupFiles didn't work. I added setupFiles and transformIgnorePatterns at "jest" in package.json

Here the code to make the gestureHandler work, but I tested it with AsyncStorage and the storage stopped work. If you aren't using AsyncStorage I presume this code will work very well!

"setupFiles": [
     "./node_modules/react-native-gesture-handler/jestSetup.js"
],
"transformIgnorePatterns": [
     "/node_modules/(?!native-base)/"
]

My reference: https://github.com/software-mansion/react-native-gesture-handler/issues/344

Answer 4

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://www.gitmemory.com/issue/kmagiera/react-native-gesture-handler/344/489547513

Answer 5

Updating package.json and reinstalling npm package worked for me.

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": ["node_modules/(?!(jest-)?react-native|@?react-navigation)"],
    "setupFiles": ["./node_modules/react-native-gesture-handler/jestSetup.js"]
}