Jest + react-navigation не обнаруживает маршрут / параметры

Question

Я пытаюсь написать тест для приложения с использованием реакции-навигации, и у меня возникают проблемы с правильным чтением маршрута и параметров.

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

TypeError: невозможно прочитать параметры свойства undefined

на const [leadId] = useState(route.params.leadId);

мои компоненты выглядят как

export default function AComponent() {
  const route = useRoute();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [leadId] = useState(route.params.leadId);
}

Я пробовал следовать https://callstack.github.io/react-native-testing-library/docs/react-navigation/, но получилWarning: React.createElement: type is invalid при обертывании компонента.

Мой тест выглядит как

import React from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import { render, fireEvent, cleanup } from 'react-native-testing-library';
import configureMockStore from 'redux-mock-store';

import AComponent from 'components/contact/AComponent';

const mockStore = configureMockStore([]);

describe('<AComponent />', () => {
  let getByTestId, store;

  beforeEach(() => {
    store = mockStore({});

    ({ getByTestId } = render(
      <Provider store={store}>
        <AComponent />
      </Provider>
    ));
  });
});

моя шутка

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({ goBack: jest.fn() }),
    useRoute: jest.fn(),
  };
});

Я не уверен, неправильно ли я упаковываю компоненты или мне не хватает чего-то еще.

Приветствуются любые идеи или помощь.

Спасибо.

Answer 1

Эй, я только что решил это сам и вот мое решение

+ Изменить

jest.mock('@react-navigation/native', () => {
  return {
    useNavigation: () => ({ goBack: jest.fn() }),
    useRoute: jest.fn(),
  };
});

Чтобы

jest.mock('@react-navigation/native', () => ({
  ...jest.requireActual('@react-navigation/native'),
  useNavigation: () => ({ goBack: jest.fn() }),
  useRoute: () => ({
    params: {
      <yourParamName>: '<paramValue>',
      <yourParamName2>: '<paramValue2>',
      etc...
    }
  }),
}));

В моем случае я поместил этот блок кода в свой файл setup.ts, а затем в свою конфигурацию jest внутри package.json я указал на него.

пример

"setupFiles": [
  "./node_modules/react-native-gesture-handler/jestSetup.js",
  "./jest/setup.ts"
]

Тогда в самом тесте

const navigation = { navigate: jest.fn() };
const { getByTestId, getByText, queryByTestId } = render(<App navigation={navigation}/>);