如何测试react导航认证流程？
如何测试react导航认证流程？
提问于 2020-03-17 05:57:11
我正在开发一个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.我怎么才能修复它呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-18 09:44:18
问题是我在身份验证流程中使用了一些异步函数。因此，我所要做的就是将测试方法改为异步方法，如下所示：
import 'react-native';
import React from 'react';
import App from '../App';
import renderer from 'react-test-renderer';
it('renders correctly', async () => {
renderer.create(<App />);
});这解决了这个问题。
Stack Overflow用户
发布于 2020-03-17 16:00:07
你需要为你的jest做一些配置：
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"
]
}此外，您还可以将其他配置添加到此文件中，然后从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，你需要做类似的事情，你可以在这里询问或在谷歌上搜索。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60713738
复制相关文章
相似问题
腾讯云开发者
