React-native-navigation: [v3] Jest testing

[safaiyeh]

Issue Description

How can I get started with Jest testing?

• Test if components did register

* Test if screen was push/poped correctly

Environment

• React Native Navigation version: ^3.2.0
• React Native version: 0.61.1
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Debug

[ItsNoHax]

Jest won't help you here, I believe you are looking for a more end-to-end testing library such as: https://github.com/wix/Detox

On that note, please don't use the issue tracker for such questions... Issues are reserved for bugs/feature requests and discussions related to RNN.

[support[bot]]

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.

[pacozaa]

I think this is a legit question because I also have the problem mocking react-native-navigation.

Anyone has jest.mock it?

[guyca]

The playground app uses jest, nothing fancy. Here's the package.json for reference as well

[pacozaa]

@guyca Just saw your post
I did this and it works!

jest.mock('react-native-navigation', () => {
  return {
    Navigation: {
      events: jest.fn(()=>{
        return {
          bindComponent: jest.fn(),
          registerAppLaunchedListener: jest.fn()
        }
      }),
      registerComponentWithRedux: jest.fn()
    }
  }
})

Now I will take a look at your suggestion :)

[pacozaa]

@guyca One question, instead of mocking should I use this as in package.json?

"collectCoverageFrom": [
    "lib/dist/**/*.js",
    "integration/**/*.js",
    "!lib/dist/index.js",
    "!lib/dist/Navigation.js",
    "!lib/dist/adapters/**/*",
    "!lib/dist/interfaces/**/*",
    "!lib/dist/**/*.test.*",
    "!integration/**/*.test.*",
    "!integration/*.test.*"
],

[fabriziobertoglio1987]

my issue is triggering and testing componentDidAppear with react-native-testing-library

I tried to invoke the callback in the constructor with something like

      const eventSpy = jest.spyOn(UrbiNavigation, 'registerComponentDidAppearEvent');
      eventSpy.mockImplementation((componentId: string, callback: () => void) => callback());

where registerComponentDidAppearEvent is this function

  const registerComponentDidAppearEvent = (
    componentId: RegisteredComponentId,
    componentDidAppearHandler: () => any
  ) => {
    componentDidAppearListeners[componentId] = componentDidAppearHandler;
  }
 registerComponentDidAppearEvent('Component', this.componentDidAppear);

but even if componentDidAppear is triggered after render the component (so the mock works and the relevant code is executed), the test fails probably because the callback is not wrapped in act().

So I gave a look in their tests, but I don't think they can be used as example

this is one of their test expectations

https://github.com/wix/react-native-navigation/blob/b5452ca614cf61e4d8b4101d7e9cbbc6accf7681/lib/src/events/EventsRegistry.test.tsx#L10
https://github.com/wix/react-native-navigation/blob/b5452ca614cf61e4d8b4101d7e9cbbc6accf7681/lib/src/events/EventsRegistry.test.tsx#L28

which is instance of this test fake https://github.com/wix/react-native-navigation/blob/b5452ca614cf61e4d8b4101d7e9cbbc6accf7681/lib/src/adapters/NativeEventsReceiver.ts#L20-L36