SyntaxError: Cannot use import statement when following vue-test-utils 官方教程

Question

我无法让 vue 测试与 vue-test-utils 和 jest 一起使用。我用 vue cli 创建了一个干净的新项目，并添加了如下的玩笑，也许有人可以跟着告诉我我做错了什么。 （我正在关注这个安装指南：https://vue-test-utils.vuejs.org/installation/#semantic-versioning）

1. vue create jest-test

   1.1。 npm install

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

3. 在 package.json 中添加了 jest 配置：

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

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

5. 将笑话配置调整为：

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

   6. 将 babel 配置调整为：

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

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

7. 在此文件中添加了以下内容：

   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')
   })
   

8. 在 package.json 脚本中添加了以下内容： "jest": "jest"

9. npm run jest

10. 得到以下错误：

    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/$1",
  },
  testEnvironment: 'jsdom'
}