Question

我测试App.js时出现以下错误：

TypeError: Cannot read property 'createStackNavigator' of undefined

      24 |             borderBottomWidth:0,
      25 |         },
    > 26 |         headerTintColor: '#294c95',
         |                                                  ^
      27 |         headerTitleStyle: {
      28 |             fontWeight: 'bold',
      29 |             color:'white',

表示的文件为HomeNavigation.js。另一方面，指示正确的行以及此文件中的代码正确

这是我的考试

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';

global.fetch = jest.fn(() => new Promise(resolve => resolve()));
jest.mock('react-native-gesture-handler', () => {});
jest.mock('react-navigation-stack', () => { BaseButton: {} });
//jest.mock('react-navigation', ()=>{}); //if I add or remove this line it doesn't change anything.

describe('App', ()=> {
  it('renders correctly the App component', () => {
    const tree = renderer.create(<App/>).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

jest.mock('react-native-gesture-handler', () => {})此行解决了此问题：TypeError：无法读取未定义的属性“ State”
jest.mock('react-navigation-stack', () => { BaseButton: {} });此行解决了此问题：TypeError：无法读取未定义的属性'BaseButton'

HomeNavigation.js

import React from "react";
import {createStackNavigator} from "react-navigation";
import {Screen1Screen} from "../Screen"; //whatever name
import {Icon} from "react-native-elements";
import {fromRight} from 'react-navigation-transitions';
import {CLR_MENU} from "../assets/styles/colors";

export const HomeNavigation = createStackNavigator({
    Screen1: Screen1Screen // whatever name // this part is correct
},{
    cardStyle: {
        backgroundColor: 'black',
        opacity: 1,
    },
    defaultNavigationOptions: (navigation) =>({
        headerStyle: {
            backgroundColor: [CLR_MENU],
            borderBottomWidth:0,
        },
        headerTintColor: '#294c95', // the error point on this line
        headerTitleStyle: {
            fontWeight: 'bold',
            color:'white',
        },
        headerRight:
            <Icon
                name = "menu"
                size = {24}
                color = "white"
                onPress={_=>navigation.navigation.openDrawer()}
                containerStyle={{marginRight:10}}
                underlayColor={CLR_MENU}
            />,
    }),
    transitionConfig: () => fromRight(),
});

package.json

...
"jest": {
    "preset": "react-native",
    "setupFiles": [
      "<rootDir>/src/setupJest.js"
    ],
    "transformIgnorePatterns": [
      "node_modules/(?!(jest-)?react-native|react-navigation|react-navigation-redux-helpers|react-navigation-drawer)"
    ]
  }

Answer 1

我认为defaultNavigationOption不是粗箭头功能。来自react-navigation的文档：

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e'
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold'
      }
    }
  }
);

当我测试app.js时，出现了一个问题

1 个答案: