SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

Question

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

vue create jest-test

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

向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 配置调整为：

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

将 babel 配置调整为：

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

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

向该文件添加了以下内容：

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 脚本添加了以下内容： "jest": "jest"
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，也会发生同样的情况。这是一个错误吗？无论我做什么，我都无法让它工作。

编辑：如果我用 Vue CLI 做，它会起作用 https://vue-test-utils.vuejs.org/installation/#installation-with-vue-cli-recommended

Answer 1

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

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

SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

SyntaxError: Cannot use import statement outside a module when following vue-test-utils official tutorial

javascript

vue.js

jestjs

mocha.js

vue-test-utils