React-native-modal - неожиданный токен с Jest с использованием TransformIgnorePatterns - PullRequest
Новая
       41

React-native-modal - неожиданный токен с Jest с использованием TransformIgnorePatterns

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

Я пытаюсь запустить тест с Jest на React Native Component.Использование react-native-modal.Я новичок в Jest и общем модульном тестировании, поэтому я не уверен, как решить эту проблему.

Я даже добавляю: transformIgnorePatterns свойство в настройке, но проблема остается той же.

Моя цель - проверить свойство Модальный компонент.

Фактический тест: 

import 'react-native';
import React from 'react';
import BottomModalComponent from './BottomModalComponent';

// Note: test renderer must be required after react-native.
import renderer from 'react-test-renderer';

test('renders BottomModalComponent.js', () => {
  const tree = renderer.create(<BottomModalComponent isVisible={false} />).toJSON();
  expect(tree).toMatchSnapshot();
});

.babelrc setup 

// File-relative configuration
{
  "plugins": [
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
  ],
  "presets": [
    "module:metro-react-native-babel-preset",
  ],
  "retainLines": true
}

Зависимости: 

  "dependencies": {
    "babel-core": "7.0.0-bridge.0",
    ...
},
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "babel-eslint": "8",
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "^4.0.1",
    "jest": "23.6.0",
    "jest-react-native": "^18.0.0",
    "metro-react-native-babel-preset": "^0.53.1",
    "react-test-renderer": "16.6.0-alpha.8af6728"
  },

babel.config.js 

// Project-wide configuration
module.exports = {
  plugins: [
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
};

Вот так выглядит мой package.json сНастройка Jest: 

"jest": {
    "preset": "react-native",
    "transformIgnorePatterns": [
      "node_modules/(?!(react-native|react-native-modal)/)"
    ]
  },

Это моя ошибка при запуске npm run test

Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

SyntaxError: /project_name/node_modules/react-native-modal/src/index.js: Unexpected token (470:8)

      468 |       this.props.useNativeDriver &&
      469 |       !this.state.showContent ? (
    > 470 |         <animatable.View />
          |         ^
      471 |       ) : (
      472 |         children
      473 |       );

Есть идеи?

1 Ответ

0 голосов
/ 08 апреля 2019

ОБНОВЛЕНИЕ (ИСПРАВЛЕНИЕ)

После некоторой отладки я заметил, что проблема в том, что мне пришлось добавить в Проектную конфигурацию (babel.config.js) : 

"presets": [
    "module:metro-react-native-babel-preset",
  ]

Так как я только добавил эту строку в локальную среду .bablerc, это вызывает проблему о том, как переносить нативные компоненты JSX.

Итак, поскольку обе мои настройки babel были одинаковыми, я могу избавиться от babel.config.js и все работает нормально.

...