开玩笑，意外的令牌导入

Posted 2023-02-22

【中文标题】开玩笑，意外的令牌导入

【英文标题】：Jest, Unexpected Token Import

【发布时间】：2017-09-13 12:00:23

【问题描述】：

我开始了一个新的 React 项目，我想使用 Jest 作为测试平台。尽管有文档、博客和许多其他资源（如 ***），但我总是遇到可能与 babel 问题有关的“意外令牌导入”错误，但我的 conf 似乎没问题。欢迎任何帮助。

我的 Jest conf（在 package.json 中）。我的 package.json 有 babel-jest、babel-preset-es2015、babel-preset-react 等依赖项。

 "jest": 
    "testMatch": [
      "**/?(*.)spec.js?(x)"
    ],
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": 
      "^lib/(.*)$": "<rootDir>/src/lib/$1",
      "^components/(.*)": "<rootDir>/src/components/$1",
    ,
    "transform": 
      "^.+\\.jsx?$": "babel-jest"
    

我的 .babelrc 配置文件：

  "presets": [
    ["es2015",  "modules": false ],
    "react"
  ],
  "plugins": [
    ["react-hot-loader/babel"],
    ["transform-object-rest-spread",  "useBuiltIns": true ],
    ["transform-runtime"]
  ],
  "env": 
      "test": 
        "presets": ["es2015", "react"]
      
   

我的规格文件：

import React from 'react';
import Radio from 'components/ui/radio';
...

还有 components/ui/radio（第一行出现导入错误）：

import Container from './container.jsx';
...

我的 webpack 有两个别名，名为 lib 和 components（开玩笑的定义为 moduleNameMapper）。

...
resolve: 
   mainFiles: ['index', 'main'],
   extensions: ['.js', '.jsx'],
   alias: 
     lib: helpers.getPath('src/lib/'),
     components: helpers.getPath('src/components/'),
   ,
   modules: [
     helpers.getPath('src'),
     helpers.getPath('node_modules'),
   ],
, 
...

【问题讨论】：

Jest: Test suite failed to run, Unexpected token =的可能重复

【参考方案1】：

我有一个非常相似的问题，最后我在运行 jest 时使用 --no-cache 解决了它。

我的 package.json 中也有 babel-jest、babel-preset-es2015、babel-preset-react 等依赖项。

jest --no-cache

【讨论】：

+1。您可能还想考虑简单地做：npm i babel-preset-env --save-dev 并将"env" 添加到 package.json 中的 babel 预设列表中。然后，您可以安装任何您需要的预设，而无需将它们全部添加到预设列表中。

我遇到了同样的问题，jest --no-cache 没有修复它，但是 /did/ 修复它的原因是删除了我的 node_modules 文件夹和我的 package-lock.json 文件并重新运行 @ 987654325@。我认为这是因为我在完成原始安装时激活了不同版本的节点。 （我用nvm切换。）检查你的node版本！

【参考方案2】：

假设您已完成通常建议的所有操作，但似乎没有任何效果：将文件扩展名从 .jsx 更改为 .js。虽然我项目中的一些库/版本可以使用.jsx，但其他的则不然，试图找出问题的根源是一场噩梦。

您不希望必须持续监控团队接触的每个文件的每次更新，以检查它是添加 JSX 还是删除 JSX 的最后一点。在实践中，当您的代码发生更改时，通常会在文件中添加和删除它。您将花费大量时间手动提醒人们“嘿，您现在应该重命名此文件”，或者仅仅因为一个微小的代码更改而被 linter 大喊大叫。它开启了foo.js 和foo.jsx 同时存在的可能性——然后会发生什么？ - 聪明的同事

如果您仍然希望 IDE 为您提供 JSX 文件的突出显示和自动完成功能，您应该能够对项目特定的工作区进行更改。对于 VSCode，它很简单：

"files.associations": 
    "*.js": "javascriptreact"
,
"emmet.syntaxProfiles": 
    "javascript": "jsx"

【参考方案3】：

如果您在更新到较新的 Jest 版本后遇到此问题，请尝试清除 Jest 的内部缓存：

jest --clearCache