Jest 确实适用于 react-navigation scrollview ， SyntaxError: Unexpected token import

Question

当 jest 配置了 "babel-jest": "^23.6.0" 时，它不起作用。当我从 react-navigation 使用 ScrollView 时，我得到了 Unexpected token import 。已解决与意外令牌导入相关的已打开问题的所有解决方案。

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

Answer 1

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

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

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

*更新

你可以这样使用它

<ScrollView contentInsetAdjustmentBehavior="automatic">
  <SafeAreaView>
        {/* long content here */}
  </SafeAreaView>
</ScrollView>

这不会给你语法错误