Jest.js 如何测试react导航认证流程？

y1aodyip 于 2023-06-04 发布在 Jest

关注(0)|答案(3)|浏览(163)

我正在开发一个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 />);
});

下面是我的package.json文件中的jest配置：

"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.

我该怎么弥补？

jestjs

来源：https://stackoverflow.com/questions/60713738/how-to-test-react-navigation-authentication-flow

3条答案

按热度按时间

n3ipq98p1#

你需要为你的jest做一些配置：
1)在你的根目录__mocks__中创建一个文件夹，然后在里面创建一个名为：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"
    ]
}

此外，您还可以将其他配置添加到此文件中，然后从package.json文件中删除jest config
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你需要做类似的事情，你可以在这里询问或在谷歌上搜索。

赞(0）回复(0）举报 2023-06-04

z4bn682m2#

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

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）回复(0）举报 2023-06-04

jrcvhitl3#

只需使用jest假计时器将其异步

jest.useFakeTimers();

所以你的代码看起来像这样：

import App from '../src';
jest.useFakeTimers();

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

赞(0）回复(0）举报 2023-06-04

我来回答

Jest.js 如何测试react导航认证流程？

3条答案

相关问题

热门标签

最新问答