使用create-react-app创建的应用程序，当运行Jest测试时遇到了意外的{符号。

Question

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

一切都很顺利，直到我运行yarn test时。然后它显示了这个错误： 我已经弹出了项目，以便我可以使用transformIgnorePatterns并将node_modules/webrtc-adapter添加到数组中，但仍然导致相同的错误。

有人能帮我解决这个问题吗？

- CherryNerd

---

你能否构建一个示例应用程序并在此处粘贴链接？ - Sanjiv

这不过是以下几个步骤：npx create-react-app myProject -> yarn add react-qr-reader -> 在 src/App.js 中添加 import QRReader from 'react-qr-reader'; -> 运行 yarn test。 - CherryNerd

演示仓库：https://github.com/CherryNerd/CRA-qr-reader - CherryNerd

Answer 1

如果您不想从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)/\"",
  },

- JP4

Answer 2

由于node_modules中的一个包使用了ES6语法，因此您需要配置“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
  ]
};

- Janderson Constantino