Question

我希望这只是我的一个简单错误，但这就是我正在做的事情。我有一个react native项目，并且我要通过url导入另一个将成为公共库的react native项目。因为现在还很早，所以我没有在另一个项目中编译代码。我可以从那里导入组件并运行webapp，但是测试（玩笑）有问题。我仔细研究了一下，发现应该在jest配置中将非转译的节点模块列入白名单，如下所示：

transformIgnorePatterns: [
    "<rootDir>/node_modules/(?!(react-native|my-module))/"
],

但是，这与运行测试时遇到的错误没有任何区别：

FAIL  src/App.test.js

●测试套件无法运行

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".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html

Details:

/path/to/my/workspace/node_modules/my-module/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { AppRegistry } from "react-native";
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

  1 | import {combineReducers} from "redux";
  2 | import {reducer as formReducer} from "redux-form";
> 3 | import partialForm from "my-module/src/reducers/form";
    | ^
  4 | import progress from "my-module/src/reducers/progress";
  5 | // import theme from "my-module/src/reducers/theme";
  6 | 

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
  at Object.<anonymous> (src/reducers/index.js:3:1)

谁能指出我的（可能是）基本错误？

Answer 1

通过对package.json中的babel config进行一些修改来克服此问题：

"babel": {
     "presets": [
-      "react-native"
+      "react-native-dotenv"
     ],
     "env": {
-      "test-web": {
+      "test:web": {
+        "presets": [
+          "react-native",
+          "es2015"
+        ],
         "plugins": [
           [
-            "react-native-web"
+            "transform-es2015-modules-commonjs",
+            "transform-strict-mode",
+            "syntax-class-properties",
+            "transform-class-properties",
+            "transform-async-to-generator",
+            "transform-flow-strip-types",
+            "transform-react-jsx",
+            "react-native-web/babel"
           ]
         ]
       },
-      "development-web": {
+      "development:web": {
+        "presets": [
+          "react-native",
+          "es2015"
+        ],
         "plugins": [
-          [
-            "react-native-web"
-          ]
+          "transform-es2015-modules-commonjs",
+          "transform-strict-mode",
+          "syntax-class-properties",
+          "transform-class-properties",
+          "transform-async-to-generator",
+          "transform-flow-strip-types",
+          "transform-react-jsx",
+          "react-native-web/babel"
         ]
       },
-      "production-web": {
+      "production:web": {
+        "presets": [
+          "react-native",
+          "es2015"
+        ],
         "plugins": [
-          [
-            "react-native-web"
-          ]
+          "transform-es2015-modules-commonjs",
+          "transform-strict-mode",
+          "syntax-class-properties",
+          "transform-class-properties",
+          "transform-async-to-generator",
+          "transform-flow-strip-types",
+          "transform-react-jsx",
+          "react-native-web/babel"
         ]
       },
-      "test": {
-        "plugins": []
+      "test:native": {
+        "presets": [
+          "react-native-stage-0"
+        ],
+        "plugins": [
+          "syntax-class-properties"
+        ]
       },
-      "development": {
-        "plugins": []
+      "development:native": {
+        "presets": [
+          "react-native-stage-0"
+        ],
+        "plugins": [
+          "syntax-class-properties"
+        ]
       },
-      "production": {
-        "plugins": []
+      "production:native": {
+        "presets": [
+          "react-native-stage-0"
+        ],
+        "plugins": [
+          "syntax-class-properties"
+        ]
       }
     }
   },

尝试在Jest配置中将节点模块列入白名单

1 个答案: