Как протестировать реакцию аутентификации навигации? - PullRequest
Новая
       49

Как протестировать реакцию аутентификации навигации?

0 голосов
/ 17 марта 2020

Я разрабатываю приложение React Native. Я делаю что-то вроде того, что объяснено здесь для реализации потока аутентификации. Итак, я создал AppContainer, который выглядит следующим образом: 

import {createAppContainer, createSwitchNavigator, createStackNavigator} from "react-navigation";
import AuthLoadingScreen from "../screens/auth/auth-loading-screen";

const AppStack = createStackNavigator({ Home: {screen: HomeScreen} });
const AuthStack = createStackNavigator({ SignIn: {screen: SignInScreen} });

const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: AuthLoadingScreen,
      App: AppStack,
      Auth: AuthStack,
    },
    {
      initialRouteName: "AuthLoading",
    },
  ),
);

export {AppContainer};
export default AppContainer;

Затем, вот что у меня есть в моем App.tsx: 

import React from "react";
import AppContainer from "./src/navigation/index";

const App = () => {
  return <AppContainer />;
};

export default App;

И вот мой App.test.tsx: 

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

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

Вот конфигурация jest в моем файле package.json: 

  "jest": {
    "preset": "react-native",
    "setupFiles": [
      "./node_modules/react-native-gesture-handler/jestSetup.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!react-native|@react-native-community/*|react-navigation|react-navigation-stack|@react-navigation/.*)"
    ],
    "timers": "fake",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  },

Теперь, когда я запускаю yarn test, тест проходит, но я получаю следующая ошибка: 

ReferenceError: You are trying to `import` a file after the Jest environment has been torn down.

      at Object.get useTheme [as useTheme] (node_modules/@react-navigation/core/lib/commonjs/index.js:3:18)
      at Object.get [as useTheme] (node_modules/react-navigation/src/index.js:169:19)
      at useTheme (node_modules/react-navigation-stack/lib/commonjs/utils/useTheme.js:65:36)
      at CardContainer (node_modules/react-navigation-stack/lib/commonjs/vendor/views/Stack/CardContainer.tsx:165:5)
      at renderWithHooks (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:5762:18) PASS  __tests__/App-test.tsx (10.657s)   ✓ renders correctly (93ms)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10695
    The above error occurred in the <CardContainer> component:
        in CardContainer (created by CardStack)
        in View (created by View)
        in View (created by MaybeScreen)
        in MaybeScreen (created by CardStack)
        in View (created by View)
        in View (created by MaybeScreenContainer)
        in MaybeScreenContainer (created by CardStack)
        in CardStack (created by KeyboardManager)
        in KeyboardManager (created by Context.Consumer)
        in RNCSafeAreaView (created by RNCSafeAreaView)
        in RNCSafeAreaView (at src/index.tsx:28)
        in SafeAreaProvider (created by Context.Consumer)
        in SafeAreaProviderCompat (created by StackView)
        in View (created by View)
        in View (created by StackView)
        in StackView (created by StackView)
        in StackView
        in Unknown (created by Navigator)
        in Navigator (created by SceneView)
        in SceneView (created by SwitchView)
        in SwitchView (created by Navigator)
        in Navigator (created by NavigationContainer)
        in NavigationContainer (created by App)
        in App

    React will try to recreate this component tree from scratch using the error boundary you provided, NavigationContainer.

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:10695
    The above error occurred in the <NavigationContainer> component:
        in NavigationContainer (created by App)
        in App

    Consider adding an error boundary to your tree to customize error handling behavior.

Как это исправить?

Ответы [ 2 ]

0 голосов
/ 18 марта 2020

Проблема заключалась в том, что у меня были некоторые асин c функции в моем потоке аутентификации. Итак, все, что мне нужно было сделать, это изменить метод теста на асин c, как показано ниже: 

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

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

Это решило проблему.

0 голосов
/ 17 марта 2020

Вам необходимо выполнить некоторые настройки для вашей шутки:

1) создайте папку в вашей root директории __mocks__, а затем подайте в нее файл с именем: react-navigation.js и поместите этот код ниже внутри что: 

export default {
   NavigationActions: () => {}
};

2) создайте файл в вашем root с таким именем: jest.config.js и поместите эти коды внутри: 

module.exports = {
    preset: 'react-native',
    setupFilesAfterEnv: [
      './__mocks__/mockFirebase'
    ],
    automock: false,
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
    testPathIgnorePatterns: [
      "node_modules"
    ]
}

Кроме того, вы можете добавить свой другой Конфигурация в этот файл, и после этого удалите jest config из вашего package.json файла

3) Также, вероятно, вам нужно добавить некоторые другие файлы в папку __mocks__:

react-native-gesture-handler.js файл с указанными ниже кодами: 

export const RectButton = () => 'View';
export const State = () => 'View';
export const LongPressGestureHandler = () => 'View';
export const BorderlessButton = () => 'View';
export const PanGestureHandler = () => 'View';

и для некоторых других похожих пакетов: react-native-device-info, Firebase, @react-native-community вам нужно сделать аналогичные вещи, вы можете спросить здесь или поискать об этом в Google.

...