Allow running jest tests by mocking react-native-navigation device layer

[yogevbd]

Motivation

The main motivation here is to provide a mock that will mimic the native behaviour in javascript for enabling fast and powerful tests using jest or any other test runner. Currently we use @testing-library/react-native to render the hierarchy but we support any other test renderer.

Usage

Detox users

We created a tool that translate detox api to @testing-library/react-native api for running your existing detox test suites with jest.
This is how your jest-setup file should look like:

const { mockDetox } = require('detox-testing-library-rnn-adapter');

mockDetox(() => require('./playground/index'));

beforeEach(() => {
  const { Navigation } = require('react-native-navigation');
  Navigation.mockNativeComponents();
});

Replace ./playground/index' with your application entry point.
Keep in mind that you might need to mock other native components as well.

@testing-library/react-native Example

import React from 'react';
import TestIDs from '../playground/src/testIDs';
const { render, within } = require('@testing-library/react-native');
const { ApplicationMock, VISIBLE_SCREEN_TEST_ID } = require('react-native-navigation/Mock');


let App;

describe('Stack', () => {
  beforeEach(async () => {
    App = render(<ApplicationMock entryPoint={() => require('../playground')} />);
  });

  it('stack button exists', async () => {
    expect(
      within(App.getByTestId(VISIBLE_SCREEN_TEST_ID)).getByTestId(TestIDs.STACK_BTN)
    ).toBeTruthy();
  });
});