Question

我正在开发React Native应用程序。我正在做类似here的解释来实现身份验证流程。因此，我创建了一个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.

我该如何解决？

Answer 1

您需要为您的玩笑做一些配置：

1）在根目录__mocks__中创建一个文件夹，然后用insid文件命名为react-navigation.js，并将其放在下面的代码中：

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

2）在您的根目录中创建一个名称为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的信息。

Answer 2

问题是我的身份验证流程中有一些异步功能。因此，我要做的就是将测试方法更改为异步方法，如下所示：

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

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

解决了这个问题。

如何测试反应导航身份验证流程？

2 个答案: