在 vue-cli-3 项目上运行 Mocha Test Explorer 需要什么 babel 或其他设置？

Question

我创建了一个带有 Mocha 测试的 vue3 cli 项目：

vue create vue_proj_with_mocha_testing 
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha

然后在 Visual Code 中安装 Mocha 测试资源管理器扩展，重新启动，将文件夹添加到工作区，单击文件夹，ctrl-shift-p 和 Mocha 测试资源管理器：“启用工作区文件夹”。开箱即用的 Mocha 测试资源管理器似乎不喜欢 vuecli 的 example.spec.js 测试：

import { expect } from 'chai'
import { shallowMount } from '@vue/test-utils'
import HelloWorld from '@/components/HelloWorld.vue'

describe('HelloWorld.vue', () => {
  it('renders props.msg when passed', () => {
    const msg = 'new message'
    const wrapper = shallowMount(HelloWorld, {
      propsData: { msg }
    })
    expect(wrapper.text()).to.include(msg)
  })
})

我将此条目添加到 settings.json 以便测试资源管理器找到 vue 的“tests”文件夹，该文件夹与默认的“test”不同。

"mochaExplorer.files": ["tests/**/*.spec.js"],

然后在测试资源管理器中收到此错误：

import { expect } from 'chai';
^^^^^^

SyntaxError: Cannot use import statement outside a module

这表明我有一些转译工作要做，而 Mocha 测试资源管理器表明这样做的方法是 settings.json 中的“mochaTestExplorer”字段，但我不确定需要什么样的 babel 包组合。应该怎么做才能在 Visual Studio Code 的 Mocha 测试资源管理器中运行这个开箱即用的 vue-cli-3 测试？这是我目前的猜测：

"mochaExplorer.require": [
    "@babel/preset-env",
    "@babel/register", 
    "@babel/polyfill",
    "@babel/plugin-transform-runtime"
],

Answer 1

恐怕你想要的是不可能的 - 问题是正确设置 Babel 还不够。Vue 单文件组件（ ）需要由Vue Loader.vue处理，Vue Loader 是 Webpack 加载器插件。

正如作者本人在这个帖子中指出的那样，如何设置 Mocha Test Explorer 以使用 webpack 并不简单- 支持 vue cli 项目

因此，我决定将测试分为两组tests/ui（使用 Vue 组件的测试）和tests/unit（非 ui 测试），并使用 Fernando 描述的设置并进行以下修改：

将 Mocha Test Explorer 配置为仅搜索非 ui 测试：

"mochaExplorer.files": "tests/unit/**/*.spec.js",

包.json：

"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",

...从命令行运行测试时包含这两个文件夹

注意：最后一步 - 修改babel.config.js- 不需要，没有它一切正常......