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

Posted

技术标签:

【中文标题】Jest 给出错误:“SyntaxError: Unexpected token export”【英文标题】:Jest gives an error: "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,看看是否有帮助?如果它不能帮助你,我不想用另一个答案来拥挤这个问题 【参考方案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

【讨论】:

以上是关于Jest 给出错误:“SyntaxError: Unexpected token export”的主要内容,如果未能解决你的问题,请参考以下文章

Jest-dom 给出错误“TypeError: expect(...).toHaveStyle is not a function”

Jest mock 总是给出 undefined (typescript + ts-jest)

在 vue jest 中传递 propData 返回 undefined

使用带有 jest 和 react-testing-library 的 next/head 测试 next.js 标题,给出误报

node-fetch 3.0.0 和 jest 给出 SyntaxError: Cannot use import statement outside a module

开玩笑 - 测试给出错误 TypeError: Cannot read property 'then' of undefined