create-react-app jest 遇到了意外的令牌 {答案

【问题标题】：create-react-app jest encountered unexpected token {create-react-app jest 遇到了意外的令牌 {
【发布时间】：2019-08-24 20:59:10
【问题描述】：

我正在开发一个带有 QR 扫描仪的 React 应用程序，其中包含 create-react-app。
我添加了模块react-qr-reader，它又使用了模块webrtc-adapter。

一切都很好，直到我运行yarn test。然后它告诉我这个错误：

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

谁能帮我解决这个问题？

【问题讨论】：

您可以构建一个示例应用并在此处粘贴链接吗？
无非就是：npx create-react-app myProject -> yarn add react-qr-reader -> import QRReader from 'react-qr-reader'; in src/App.js -> yarn test
演示仓库：github.com/CherryNerd/CRA-qr-reader

标签： reactjs jestjs babeljs

【解决方案1】：

这是因为de 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
  ]
};

【讨论】：

【解决方案2】：

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

【讨论】：