用玩笑测试应用程序时无法读取未定义的 属性 'default'

Question

我无法测试使用原生图标的组件。它正在投掷 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 默认组件和来自 native-base 的组件。

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

我能够通过使用 transform 和 transformIgnorePatterns 来解决它。但是问题仍然存在于 native-base 使用的 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

也尝试添加您在图标组件中传递的道具。

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 2

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

TypeError: Cannot read property 'default' of undefined

为了解决这个问题，我在 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 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"
}