Не удается прочитать свойство 'default' из неопределенного при тестировании приложения с помощью jest - PullRequest
Новая
       78

Не удается прочитать свойство 'default' из неопределенного при тестировании приложения с помощью jest

1 голос
/ 05 апреля 2019

Я не могу протестировать свой компонент, который использует иконку native-base.Он выбрасывает 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)

Я создал реактивный проект и пытаюсь протестировать компоненты с помощью jest.Я использовал реагировать родные компоненты по умолчанию и компоненты из native-базы.

Если я включаю компоненты из реактивной системы, jest может правильно ее отобразить, а если я включаю какой-либо компонент из собственной базы, выдает ошибку script_transformer.

Мне удалось решить эту проблему с помощью transform и transformIgnorePatterns.Но проблема все еще там с реакцией-вектором-значком, который используется native-base.

Вот пакет .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;

Ответы [ 3 ]

1 голос
/ 29 апреля 2019

Произошла та же ошибка при использовании с react-test-renderer:

TypeError: Невозможно прочитать свойство 'default' из неопределенного

Чтобы исправить это, я высмеял native-base * * * * * * * * * * * * * * * * * * * * * * *.

0 голосов
/ 26 июня 2019

У меня была одна и та же проблема несколько раз, пришлось удалить 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"
}
0 голосов
/ 06 апреля 2019

Попробуйте также добавить реквизиты, которые вы передаете в Icon Icon. 

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();
});
...