Jest 给出错误：“SyntaxError: Unexpected token export”答案

【问题标题】：Jest gives an error: "SyntaxError: Unexpected token export"Jest 给出错误：“SyntaxError: Unexpected token export”
【发布时间】：2018-08-22 03:18:16
【问题描述】：

我正在使用 Jest 测试我的 React 应用程序。

最近，我在我的应用中添加了DeckGL。我的测试因此错误而失败：

Test suite failed to run

/my_project/node_modules/deck.gl/src/react/index.js:21
export {default as DeckGL} from './deckgl';
^^^^^^

SyntaxError: Unexpected token export

  at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:318:17)
  at Object.<anonymous> (node_modules/deck.gl/dist/react/deckgl.js:9:14)
  at Object.<anonymous> (node_modules/deck.gl/dist/react/index.js:7:15)

这看起来像是 Jest 在运行测试之前转换节点模块的问题。

这是我的 .babelrc：

{
  "presets": ["react", "es2015", "stage-1"]
}

这是我的玩笑设置：

"jest": {
    "testURL": "http://localhost",
    "setupFiles": [
      "./test/jestsetup.js"
    ],
    "snapshotSerializers": [
      "<rootDir>/node_modules/enzyme-to-json/serializer"
    ],
    "moduleDirectories": [
      "node_modules",
      "/src"
    ],
    "moduleNameMapper": {
      "\\.(css|scss)$": "<rootDir>/test/EmptyModule.js"
    }
  },

我似乎拥有转换export {default as DeckGL } 所需的正确东西。那么有什么想法出了什么问题吗？

【问题讨论】：

您是否忘记在导出上方的行中添加分号？
@DonP，您可以尝试使用推荐的ts-jest，看看是否有帮助？如果它不能帮助你，我不想用另一个答案来拥挤这个问题

标签： jestjs

【解决方案1】：

这意味着文件不会通过 TypeScript 编译器进行转换，例如因为它是一个带有 TS 语法的 JS 文件，或者它作为未编译的源文件发布到 npm。这是您可以执行的操作。

调整您的transformIgnorePatterns 允许列表：

{
  "jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)"
    ]
  }
}

默认情况下，Jest 不会转换 node_modules，因为它们应该是有效的 JavaScript 文件。但是，库作者碰巧假设您将编译他们的源代码。所以你必须明确地告诉 Jest。以上 sn-p 意味着 @ngrx、deck 和 ng-dynamic 将被转换，即使它们是 node_modules。

【讨论】：

必须将其与@Jimi Pajala 的答案结合起来才能在运行测试时让事情正常工作。
正则表达式中嵌套负前瞻(?!...(?!...))的原因是什么？
我把这个放在哪里？哪个文件？
@EladKatz 我是新手，但我认为这个块是为 package.json 设计的，如果没有“jest”包装器，你可以把它放在 jest.config.js 中。
可能只想像这样简化正则表达式：node_modules\/(?!(@ngrx|deck.gl|ng-dynamic))

【解决方案2】：

这是因为 Node.js 无法处理 ES6 模块。

因此，您应该将您的模块转换为 CommonJS。

如果你使用 Babel 7 =>

安装 npm install --save-dev @babel/plugin-transform-modules-commonjs

并且仅用于测试用例添加到 .babelrc， Jest 自动给出 NODE_ENV=test 全局变量。

"env": {
    "test": {
      "plugins": ["@babel/plugin-transform-modules-commonjs"]
    }
}

或者如果你使用 Babel 6 =>

npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

到.babelrc

"env": {
    "test": {
      "plugins": ["transform-es2015-modules-commonjs"]
    }
}

【讨论】：

这行得通！但是，请确保运行 jest --clearCache 在它开始工作之前我必须这样做。
在哪里添加："env": { "test": { "plugins": ["@babel/plugin-transform-modules-commonjs"] } }
@joeCarpenter 到您的 .babelrc 或您可能正在使用的其他 babel 配置文件，例如 babel.config.js。如果您还没有，您可以在项目根目录中创建名为 .babelrc 的新文件，并将其添加到根目录 { } -tags 下。
必须将这个答案与@Ria Anggraini 的答案结合起来才能在运行测试时让事情正常工作。

【解决方案3】：

如果你使用'create-react-app'，它不允许你通过 package.json 中的 Jest 属性指定 'transformIgnorePatterns' p>

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

您可以在 package.json 中使用如下 CLI 来覆盖它，它可以工作：

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

【讨论】：

CRA 3.0.2 added 在 package.json 中支持 Jest transformIgnorePatterns。

【解决方案4】：

默认情况下，Jest 不会编译 node_modules 目录中的文件。

transformIgnorePatterns [数组]

默认值：["/node_modules/"]

与所有源匹配的正则表达式模式字符串数组转换前的文件路径。如果测试路径匹配任何模式，它不会被转换。默认值：[“/node_modules/”]

DeckGL 似乎在 ES6 中，为了让 jest 能够阅读它，你也需要编译它。
为此，只需在 transformignorePatterns 中为 DeckGL 添加一个例外

"transformIgnorePatterns": ["/node_modules/(?!deck\.gl)"]

https://facebook.github.io/jest/docs/en/configuration.html#transformignorepatterns-array-string

【讨论】：

【解决方案5】：

我在 monorepo 上遇到了这个问题。根 node_modules 中的一个包破坏了我的测试。我通过将我的本地 .babelrc 文件更改为 babel.config.js 来修复。解释：https://github.com/facebook/jest/issues/6053#issuecomment-383632515

【讨论】：

【解决方案6】：

这段代码对我有用 // .babelrc

{
  "presets": [
    ["env", {
      "modules": "commonjs", // <- Check and see if you have this line
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
    }
  }
}

jest 理解 commonJs，所以它需要 babel 在使用前为它转换代码。 jest 在运行代码时也使用缓存。因此，请确保在运行 jest 之前运行 jest --clearCache。

测试环境：
节点 v8.13.0
通天塔 v6+
开玩笑 v27

【讨论】：