在使用jest测试应用程序时，无法读取未定义的属性“default”

Question

我无法测试使用基于本机的Icon的组件。它投掷Cannot read property 'default' of undefined。

The above error occurred in the <Icon> component:
  in Icon (at IconNB.js:80)
  in IconNB (at connectStyle.js:384)
  in Styled(IconNB) (at Icon/index.js:67)
  in Icon (at connectStyle.js:384)
  in Styled(Icon) (at testingDummy.js:10)
  in View (created by Component)
  in Component (at testingDummy.js:9)
  in TestSum (at testingComp.test.js:9)

我已经设置了一个react-native项目并尝试使用jest测试组件。我使用了本机默认组件和本机组件。

如果我包含来自react-native的组件，则只有jest能够正确呈现它，而如果我包含来自native-base的某些组件，则会从script_transformer中抛出错误。

我能够通过使用transform和transformIgnorePatterns来解决它。但问题仍然存在，本地基地正在使用react-vector-icon。

这是包.json

{
  "name": "Canvas",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "android-dev": "ENVFILE=config/.env.dev react-native run-android",
    "android-staging": "ENVFILE=config/.env.staging react-native run-android",
    "android-prod": "ENVFILE=config/.env.prod react-native run-android",
    "ios-dev": "ENVFILE=config/.env.dev react-native run-ios",
    "ios-staging": "ENVFILE=config/.env.staging react-native run-ios",
    "ios-prod": "ENVFILE=config/.env.prod react-native run-ios --scheme prod",
    "build-android-prod": "export ENVFILE=config/.env.prod && cd android && ./gradlew assembleRelease && cd .."
  },
  "dependencies": {
    "axios": "0.18.0",
    "native-base": "2.8.1",
    "prop-types": "15.6.2",
    "react": "16.5.0",
    "react-native": "0.57.1",
    "react-native-branch": "^3.0.0-beta.1",
    "react-native-communications": "2.2.1",
    "react-native-config": "0.11.7",
    "react-native-dialog": "5.4.0",
    "react-native-document-picker": "^2.3.0",
    "react-native-maps": "0.22.1",
    "react-native-progress": "3.5.0",
    "react-native-progress-circle": "2.0.1",
    "react-native-responsive-screen": "1.1.10",
    "react-native-snap-carousel": "3.7.5",
    "react-native-vector-icons": "6.0.1",
    "react-native-webview": "2.5.0",
    "react-native-wkwebview-reborn": "2.0.0",
    "react-navigation": "2.17.0",
    "react-redux": "5.0.7",
    "redux": "4.0.1",
    "redux-devtools-extension": "2.13.5",
    "redux-thunk": "2.3.0",
    "socketcluster-client": "14.2.1"
  },
  "devDependencies": {
    "@babel/runtime": "7.0.0-beta.55",
    "ajv": "6.0.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "eslint": "5.6.1",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "7.11.1",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.47.0",
    "q": "1.4.1",
    "react-test-renderer": "16.5.0",
    "ts-jest": "^24.0.1"
  },
  "jest": {
    "preset": "react-native",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
    },
    "transformIgnorePatterns": [
      "/node_modules/(?!native-base)/"
    ]
  }
} 

这是测试文件

import React from 'react';
import 'react-native';
import TestComp from '../testingDummy';

import renderer from 'react-test-renderer';

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

这是观点

import React, { Component } from 'react';
import { View } from 'react-native'
import { Text, Icon } from 'native-base'

class TestSum extends Component {

  render() {
    return (
      <View>
        <Icon name="rupee" type="FontAwesome" style={{ color: '#000' }} />
        <Text>this is test</Text> 
      </View>
    );
  }
}

export default TestSum;

Answer 1

与react-test-renderer一起使用时出现相同的错误：

TypeError：无法读取未定义的属性“default”

为了修复它，我在我的jest的安装文件中模拟了native-base的Icon组件：

import React from 'react';
import { View } from 'react-native';
import * as nativeBase from 'native-base';
function MockIcon(props) { return <View {...props} />; }
nativeBase.Icon = MockIcon;

Answer 2

尝试添加您在Icon Component中传递的道具。

import React from 'react';
import 'react-native';
import TestComp from '../testingDummy';

import renderer from 'react-test-renderer';


it('renders correctly', () => {
  const tree = renderer.create(<TestComp name="" type="" style={}/>).toJSON();
  expect(tree).toMatchSnapshot();
});

Answer 3

有几次相同的问题，不得不删除babel.config.js和我的开发依赖项在这里：

"devDependencies": {
  "babel-jest": "24.8.0",
  "enzyme": "^3.10.0",
  "enzyme-adapter-react-16": "^1.14.0",
  "enzyme-to-json": "^3.3.5",
  "jest": "24.8.0",
  "jest-enzyme": "^7.0.2",
  "react-dom": "16.8.3",
  "redux-mock-store": "^1.5.3"
}