Тест шутки не выполняется должным образом с react-navigation

#javascript #reactjs #react-native #jestjs #react-navigation

#javascript #reactjs #react-native #jestjs #react-навигация

Вопрос:

Я работаю с react-native 0.59 и хочу написать свои первые тесты для своего приложения. Итак, читая документы react, мне просто нужно запустить следующую команду yart test , которая выполняет следующий файл:

 import 'react-native';
import React from 'react';
import App from '../App';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  renderer.create(<App />);
});
 

Это файл по умолчанию для тестирования при запуске приложения с помощью react-native. Но когда я запускаю yarn test command, тест завершается неудачно. Обратная трассировка выглядит следующим образом:

 FAIL  __tests__/App-test.jsTest suite failed to run

TypeError: (0 , _reactNavigation.createBottomTabNavigator) is not a function

  43 |
> 44 | const MainStack = createBottomTabNavigator({
     |                                                               ^
  45 |   Home: { screen: Home },
  46 |   Pets: { screen: Pets },
  47 |   Notifications: { screen: UserNotifications },

  at Object.<anonymous> (src/app-navigator.js:44:63)
  at Object.<anonymous> (src/Reducers/navigation.js:2:44)
 

Это часть моего app-navigator.js файла:

 const PetStack = createStackNavigator({
  UpdatePet: { screen: UpdatePet },
}, {
  mode: 'card',
  defaultNavigationOptions: {
    headerStyle: { backgroundColor: 'transparent' }
  }
});

const MainStack = createBottomTabNavigator({
  Home: { screen: Home },
  Pets: { screen: Pets },
  Notifications: { screen: UserNotifications },
  UpdateUser: { screen: UpdateUser },
});
 

Это неудачные строки. Это так странно, потому что, когда я console.log createStackNavigator регистрирую издевательскую функцию, но когда я делаю это с createBottomTabNavigator ее помощью, она регистрируется undefined .

Это моя конфигурация jest:

 "jest": {
  "preset": "react-native",
  "verbose": true,
  "transform": {
    "^. \.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
  },
  "globals": {
    "NODE_ENV": "test"
  },
  "moduleFileExtensions": [
    "js"
  ],
  "moduleDirectories": [
    "src",
    "node_modules"
  ],
  "transformIgnorePatterns": [
    "/node_modules/(?!native-base|react-native-localize|react-navigation|react-navigation-redux-helpers)/"
  ],
  "setupFiles": [
    "./jest-setup.js"
  ]
}
 

Я прочитал некоторые связанные с этим проблемы и только что нашел это. Они рекомендуют установить для ключа inlineRequires значение false in node_modules/react-native/jest/preprocessor.js , но у меня это не работает

Комментарии:

1. У меня такая же проблема, и я не могу понять, как ее исправить. Пожалуйста, обновите свой пост, если найдете решение

2. Я не нашел никаких обновлений, но, прочитав его, кажется, что это невозможно сделать, вам нужно высмеять весь процесс навигации @YanivShnaider

3. @GermanAlzate я сталкиваюсь с такой же проблемой. любое решение?

Ответ №1:

создайте файл jest.config.js в корне вашего проекта, куда package.json будет помещен file .

 // jest.config.js
const {defaults} = require('jest-config');
module.exports = {
  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
};
 

Для получения более подробной информации см. Это