Как издеваться над навигационной опорой React Navigation для модульных тестов с TypeScript в React Native?

Я создаю приложение React Native с TypeScript. Для навигации я использую React Navigation, а для модульного тестирования - Jest и Enzyme.

Вот (урезанный) код для одного из моих экранов (LoadingScreen.tsx):

import styles from "./styles";
import React, { Component } from "react";
import { Text, View } from "react-native";
import { NavigationScreenProps } from "react-navigation";

// Is this correct?
export class LoadingScreen extends Component<NavigationScreenProps> {
// Or should I've done:
// export interface Props {
//   navigation: NavigationScreenProp<any, any>;
// }

// export class LoadingScreen extends Component<Props> {
  componentDidMount = () => {
    this.props.navigation.navigate("LoginScreen");
  };

  render() {
    return (
      <View style = {styles.container}>
        <Text>This is the LoadingScreen.</Text>
      </View>
    );
  }
}

export default LoadingScreen;

При попытке протестировать экраны столкнулся с проблемой. Экраны ожидают опору с типом NavigiationScreenProps, потому что я получаю доступ к опоре React Navigations navigation. Вот код тестового файла (LoadingScreen.test.tsx):

import { LoadingScreen } from "./LoadingScreen";
import { shallow, ShallowWrapper } from "enzyme";
import React from "react";
import { View } from "react-native";
import * as navigation from "react-navigation";

const createTestProps = (props: Object) => ({
  ...props
});

describe("LoadingScreen", () => {
  describe("rendering", () => {
    let wrapper: ShallowWrapper;
    let props: Object;
    beforeEach(() => {
      props = createTestProps({});
      wrapper = shallow(<LoadingScreen {...props} />);
    });

    it("should render a <View />", () => {
      expect(wrapper.find(View)).toHaveLength(1);
    });
  });
});

Проблема в том, что LoadingScreen ожидает опоры navigation.

Я получаю сообщение об ошибке:

[ts]
Type '{ constructor: Function; toString(): string; toLocaleString(): string; valueOf(): Object; hasOwnProperty(v: string | number | symbol): boolean; isPrototypeOf(v: Object): boolean; propertyIsEnumerable(v: string | ... 1 more ... | symbol): boolean; }' is not assignable to type 'Readonly<NavigationScreenProps<NavigationParams, any>>'.
  Property 'navigation' is missing in type '{ constructor: Function; toString(): string; toLocaleString(): string; valueOf(): Object; hasOwnProperty(v: string | number | symbol): boolean; isPrototypeOf(v: Object): boolean; propertyIsEnumerable(v: string | ... 1 more ... | symbol): boolean; }'.
(alias) class LoadingScreen

Как я могу это исправить?

Думаю, мне нужно как-то поиздеваться над опорой navigation. Я пробовал это сделать (как видите, в своем тесте я импортировал * из React Navigation), но не смог понять. Есть только NavigationActions, который можно использовать удаленно, но он включает только navigate(). TypeScript ожидает, что над всем, даже над государством, будут издеваться. Как я могу издеваться над опорой navigation?

Изменить 1: Правильный ли подход с использованием NavigationScreenProps или мне следует использовать подход interface Props? Если да, то как бы вы издевались над чем (это приводит к той же ошибке).

Изменить 2: Используя второй подход с интерфейсом и

export class LoadingScreen extends Component<Props, object>

Мне удалось «решить» эту проблему. Мне буквально пришлось издеваться над каждым свойством объекта навигации следующим образом:

const createTestProps = (props: Object) => ({
  navigation: {
    state: { params: {} },
    dispatch: jest.fn(),
    goBack: jest.fn(),
    dismiss: jest.fn(),
    navigate: jest.fn(),
    openDrawer: jest.fn(),
    closeDrawer: jest.fn(),
    toggleDrawer: jest.fn(),
    getParam: jest.fn(),
    setParams: jest.fn(),
    addListener: jest.fn(),
    push: jest.fn(),
    replace: jest.fn(),
    pop: jest.fn(),
    popToTop: jest.fn(),
    isFocused: jest.fn()
  },
  ...props
});

Остается вопрос: это правильно? Или есть решение получше?

Изменить 3: Когда я использовал JS, этого было достаточно, чтобы смоделировать только нужное мне свойство (часто просто перемещаться). Но с тех пор, как я начал использовать TypeScript, мне пришлось высмеивать каждый аспект навигации. В противном случае TypeScript будет жаловаться, что компонент ожидает опору с другим типом.