Jest，意外的标记导入

Question

我开始了一个新的React项目，并且想使用Jest作为测试平台。尽管有文档、博客以及像stackoverflow这样的许多其他资源，但我总是会遇到一个"unexpected token import"错误，可能与Babel问题有关，但我的配置似乎没问题。欢迎任何帮助。

我的Jest配置（在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（在 jest 中定义为 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'),
   ],
}, 
...

- Jerome

---

可能是Jest: 测试套件运行失败，出现意外的令牌 =的重复问题。 - Valentin Barit

Answer 1

我遇到了非常相似的问题，最终解决方法是在运行jest时使用 --no-cache。

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

jest --no-cache

- pearpages

---

+1. 你可能还想考虑简单地执行以下操作：npm i babel-preset-env --save-dev，并将 "env" 添加到 package.json 中的 babel 预设列表中。然后，您只需安装所需的预设，而无需将它们全部添加到预设列表中。 - Jonathan

我曾经遇到了同样的问题，而jest --no-cache并没有解决它。但是，真正解决它的方法是删除我的node_modules文件夹和package-lock.json文件，然后重新运行npm i。我认为这是由于我在进行原始安装时激活了不同版本的node。 （我使用nvm进行切换。）请检查您的node版本！ - Jonathan

Answer 2

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

jest --clearCache

- Ayan

Answer 3

假设您已经按照通常建议的一切去做，但似乎仍然无法解决问题：将文件扩展名从.jsx更改为.js。虽然我的项目中某些库/版本可以使用.jsx，但其他库/版本则不行，而且试图找出是谁引起了问题真是一场噩梦。

你不想每次团队成员更新文件时都要监视每个文件的每个更新，以检查它是否添加了JSX或删除了最后一部分JSX。实际上，在代码发生变化时，向文件中添加和删除JSX是很常见的。您要花费大量时间手动提醒人们“嘿，现在应该重命名这个文件”，或者因为微小的代码更改而被linter抨击。这也会导致foo.js和foo.jsx同时存在的可能性-那么会发生什么呢？-一个聪明的同事

如果您仍然希望获得IDE为JSX文件提供的高亮显示和自动完成功能，则应该能够进行特定于项目的工作区更改。对于VSCode来说，这非常简单：

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

- DILP