SyntaxError:在遵循 vue-test-utils 官方教程时不能在模块外使用 import 语句 [英] SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

问题描述

我无法使用 vue-test-utils 和 jest 进行 vue 测试.我用 vue cli 创建了一个干净的新项目，并添加了 jest 如下，也许有人可以跟随并告诉我我做错了什么.(我正在遵循此安装指南:https://vue-test-utils.vuejs.org/installation/#semantic-versioning)

I can't get vue testing to work with vue-test-utils and jest. I created a clean new project with vue cli and added jest as follows, maybe someone can follow along and tell me what I'm doing wrong. (I'm following this installation guide: https://vue-test-utils.vuejs.org/installation/#semantic-versioning)

1. vue 创建 jest-test

1.1.npm 安装

npm install --save-dev jest @vue/test-utils vue-jest

在 package.json 中添加了 jest 配置:

Added jest config to package.json:

{
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest"
    }
  }
}

npm install --save-dev babel-jest @babel/core @babel/preset-env babel-core@^7.0.0-bridge.0

调整 jest 配置为:

Adjusted jest config to:

{
  "jest": {
    "transform": {
      // process `*.js` files with `babel-jest`
      ".*\\.(js)$": "babel-jest" //<-- changed this
    }
  }
}

1. 将 babel 配置调整为:

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset',
        '@babel/preset-env' //<-- added this
    ]
};

在项目根目录下的tests目录下创建example.test.js(jest-test/tests)

Created example.test.js in a tests directory under the project root (jest-test/tests)

在此文件中添加了以下内容:

Added the following to this file:

import { mount } from '@vue/test-utils'
import HelloWorld from "@/components/HelloWorld";


test('displays message', () => {
    const wrapper = mount(HelloWorld)

    expect(wrapper.text()).toContain('Welcome to Your Vue.js App')
})

在 package.json 脚本中添加了以下内容:玩笑":玩笑"

npm run jest

出现以下错误:

C:\Users\xxx\jest-test\tests\example.test.js:1
    import { mount } from '@vue/test-utils'
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Mocha 或者我在现有项目中尝试它时也会发生同样的情况.这是一个错误吗?无论我做什么，我都无法让它工作.

Same happens with Mocha or if I try it in an existing project. Is this a bug? I can't get it working, no matter what I do.

如果我用 Vue CLI 来做，它就可以工作https://vue-test-utils.vuejs.org/installation/#installation-with-vue-cli-recommended

If I do it with Vue CLI, it works https://vue-test-utils.vuejs.org/installation/#installation-with-vue-cli-recommended

推荐答案

您需要转换 *.vue 文件和 *.js 文件.我尝试了您的设置并且可以重现该问题.但是在将 jest.config.js 更改为以下内容后，测试将运行良好:

You need to transform both *.vue files and *.js files. I tried your setup and could reproduce the issue. But after altering jest.config.js to the following, the tests will run fine:

module.exports = {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  transform: {
    '.*\\.js$':'babel-jest',
    ".*\\.(vue)$": "vue-jest"
  },
  moduleNameMapper: {
    "@/(.*)": "<rootDir>/src/$1",
  },
  testEnvironment: 'jsdom'
}

这篇关于SyntaxError:在遵循 vue-test-utils 官方教程时不能在模块外使用 import 语句的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！