使用玩笑测试应用程序时无法读取未定义的属性“默认”

debugcn 发表于 Dev

比贝克·卢特尔

我无法测试使用本机基础图标的组件。它在扔`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;

福克特

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

类型错误：无法读取未定义的属性“默认”

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。