运行 Jest 测试时出现意外的令牌“导入"错误? [英] Unexpected token 'import' error while running Jest tests?

问题描述

我意识到这个问题已被问过多次，但我遇到的所有解决方案似乎都不适合我.我在尝试为 Vue 应用程序运行 Jest 测试时遇到以下错误.

I realize this question has been asked several times but all of the solutions I've come across don't seem to work for me. I'm running into the following error while trying to run Jest tests for a Vue app.

Jest encountered an unexpected token

This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

Here's what you can do:
 • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
 • If you need a custom transformation specify a "transform" option in your config.
 • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

  You'll find more details and examples of these config options in the docs:
https://facebook.github.io/jest/docs/en/configuration.html

Details:

/node_modules/vue-awesome/icons/expand.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Icon from '../components/Icon.vue'
                                                                                         ^^^^^^

SyntaxError: Unexpected token import

> 17 | import 'vue-awesome/icons/expand'

.babelrc:

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env", { "targets": { "node": "current" }}]
      ]
    }
  }
}

package.json 中的 jest 配置:

jest config in package.json:

"jest": {
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "moduleNameMapper": {
    "^@/(.*)$": "<rootDir>/src/$1"
  },
  "transform": {
    "^.+\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\.(vue)$": "<rootDir>/node_modules/vue-jest"
  },
  "snapshotSerializers": [
    "<rootDir>/node_modules/jest-serializer-vue"
  ],
  "moduleDirectories": [
    "node_modules",
    "src"
  ]
}

看起来脚本中为测试挂载的 Vue 组件的初始导入工作正常，但模块本身内的导入(import Icon from '../components/Icon.vue) 无法识别.

It looks like the initial import in the script for the Vue component being mounted for the test is working but the import within the module itself (import Icon from '../components/Icon.vue) is not recognized.

锅炉板回购重新创建问题:github.com/DonaldPeat/stackoverflow-jest-问题

boiler plate repo to re-creates the issue: github.com/DonaldPeat/stackoverflow-jest-question

我该如何解决这个问题?

How can I resolve this?

推荐答案

你只需要确保 vue-awesome 会被 jest 转化，所以添加遵循你的笑话配置:

You just need to make sure that vue-awesome will be transformed by jest, so add following to your jest config:

transformIgnorePatterns: ["/node_modules/(?!vue-awesome)"],

这意味着:忽略 node_modules 中的所有内容，除了 vue-awesome.

which means: "Ignore everything in node_modules except for vue-awesome.

还有可能导致此错误的其他问题的详尽列表:https://github.com/facebook/jest/issues/2081

Also here is exhausive list of other issues that might cause this error: https://github.com/facebook/jest/issues/2081

这篇关于运行 Jest 测试时出现意外的令牌“导入"错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！