笑话，意外的令牌导入

Question

我开始了一个新的反应项目，我想使用笑话作为测试平台。尽管有文档、博客和许多其他资源，如stackoverflow，我总是有一个“意外令牌导入”错误，可能与巴贝尔问题有关，但我的conf似乎还不错。欢迎任何帮助。

我的Jest配置文件（在package.json中）。My 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 conf：

{
  "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';
...

和组件/ui/无线电（导入错误出现在第一行）：

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

我的网页包有两个别名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'),
   ],
}, 
...

Answer 1

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

jest --clearCache

Answer 2

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

您不想一直监视团队接触到的每个文件的每个更新，以检查它是添加JSX还是删除JSX的最后一部分。在实践中，当代码发生更改时，通常会从文件中添加和删除它。你要花很多时间，要么手动提醒人们“嘿，你现在应该重命名这个文件”，要么就因为一个小小的代码更改而被linter大喊大叫。并且它打开了同时存在foo.js和foo.jsx的可能性-然后会发生什么聪明的同事

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

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

Answer 3

我遇到了一个非常类似的问题，最后我解决了这个问题——运行jest时没有缓存。

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

jest --no-cache