create-react-app开玩笑遇到意外令牌{

Question

我正在开发带有create-react-app的QR扫描仪的React应用。
我添加了模块react-qr-reader，该模块又使用了模块webrtc-adapter。

一切正常，直到我运行yarn test。然后它向我显示此错误：

我已经弹出项目，因此可以使用transformIgnorePatterns并将node_modules/webrtc-adapter添加到数组中，但这仍然会导致相同的错误。

有人可以帮我吗？

Answer 1

由于将ES6语法打包到了node_modules中，因此您需要配置“ transformIgnorePatterns”来转换此软件包。

关于Jest的问题：https://github.com/facebook/jest/issues/2081

如何配置：http://facebook.github.io/jest/docs/tutorial-react-native.html#transformignorepatterns-customization

"transformIgnorePatterns": [
  "node_modules/(?!(react-qr-reader)/)"
]

如果此操作不起作用，请使用具有以下配置的babel.config.js（重要的是文件“ .js”，此配置不适用于“ .babelrc”文件）：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        "modules": "commonjs",
        "debug": false
      }
    ],
    /// your presets
  ],
  plugins: [
    //... your plugins
  ]
};

Answer 2

作为参考，以上的解决方案如果不做些微小的修改就对我不起作用。

"transformIgnorePatterns": [
      "node_modules/react-qr-reader/"
    ],

Answer 3

如果您不想从Create-React-App弹出，则可以使用package.json中的CLI覆盖“ transformIgnorePatterns”。

参考-https://github.com/facebook/create-react-app/issues/2537#issuecomment-390341713

  "scripts": {
    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!your-module-name)/\"",
  },