Jest确实与react-navigation scrollview一起使用,SyntaxError:意外的令牌导入

时间:2018-12-04 05:39:00

标签: react-native jestjs react-navigation babel

当jest配置为“ babel-jest”:“ ^ 23.6.0”时,它不起作用。当我从react-navigation使用ScrollView时,出现意外的令牌导入。针对与意外的令牌导入有关的未解决问题,已完成所有解决方案。

Package.json

{
  "name": "BitRiseSetup",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7",
    "react-navigation": "^3.0.4"
  },
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-test-renderer": "16.6.1",
    "regenerator-runtime": "^0.13.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"]
};

输出

/Users/vivekkumar/Desktop/myProjects/BitRiseSetup/node_modules/@react-navigation/native/dist/Scrollables.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react';
                                                                                             ^^^^^^

    SyntaxError: Unexpected token import

       7 |     return (
       8 |       <SafeAreaView>
    >  9 |         <ScrollView />
         |          ^
      10 |       </SafeAreaView>
      11 |     );
      12 |   }

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
      at Object.get ScrollView [as ScrollView] (node_modules/@react-navigation/native/dist/index.js:29:12)
      at Object.get ScrollView [as ScrollView] (node_modules/react-navigation/src/react-navigation.js:21:47)
      at Hello.render (Hello.js:9:10)
      at finishClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6625:31)
      at updateClassComponent (node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6588:10)

  console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:8060
    The above error occurred in the <Hello> component:
        in Hello

1 个答案:

答案 0 :(得分:0)

确保已将ScrollView添加到React-Native元素中

public class ValidationError
{
  private final Map<String, List<String>> errors;

  public ValidationError()
  {
    errors = new TreeMap<>();
  }

  public void addError(String field, String error)
  {
    if (!errors.containsKey(field))
    {
      errors.put(field, new ArrayList<String>());
    }

    errors.get(field).add(error);
  }

  public Map<String, List<String>> getErrors()
  {
    return errors;
  }
}

然后您不能直接关闭标签,因为它是所有内容所在的视图,您必须将内容添加到ScrollView的开始和结束标签

*已更新

您可以像这样使用它

import {
  Image,
  Alert,
  .
  .
  .
  ScrollView,
} from 'react-native';

这不会给您语法错误