Visual studio code 在vue-cli-3项目上运行Mocha Test Explorer需要哪些babel或其他设置？

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

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

然后在可视化代码中安装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”文件夹不同

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

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

SyntaxError: Cannot use import statement outside a module

这表明我有一些传输工作要做，Mocha测试资源管理器指出了实现这一点的方法是settings.json中的“MochatesExplorer”字段，但我不确定需要什么babel包组合。在Visual Studio代码中的Mocha测试资源管理器中运行这个现成的vue-cli-3测试应该做些什么？以下是我目前的猜测：

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

---

首先，在您的

devDependencies

中添加

@babel/register

之后，添加Visual Studio代码设置。json：

"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
  "NODE_ENV": "test"
},
"mochaExplorer.require": [
  "@babel/register"
]

最后，将babel.config.js更改为：

const预设=[]；
if（process.env.NODE_env===“test”）预置.push（“@babel/preset env”）；
else presets.push（“@vue/cli-plugin-babel/preset”）；
module.exports={
预设，
};

恐怕您想要的是不可能的-问题是，仅正确设置巴别塔是不够的。Vue单文件组件（

.Vue

）需要由Webpack loader插件处理

而且，没有一种简单的方法可以设置Mocha测试资源管理器来使用作者在

因此，我决定将我的测试分为两组，

tests/ui

（使用Vue组件的测试）和

tests/unit

（非ui测试），并使用Fernando描述的设置进行以下修改：

将Mocha测试资源管理器配置为仅搜索非ui测试：

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

package.json：

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

…在从命令行运行测试时包括这两个文件夹

---

注意：最后一步-修改

babel.config.js

-是不需要的，没有它一切都可以正常工作….

在一个稍微不同的配置上，我为我工作：在

.vscode/settings.json

{
    "mochaExplorer.require": "esm"
}

---

esm

也应该在您的开发依赖项中

我遇到错误：在example.spec.js中找不到模块'@/components/HelloWorld.vue'。我觉得它离我更近了，但我还是需要得到Vue使用的所有设置，对吗？谢谢！知道有些事情是不可行的，这会让人松一口气。

{
    "mochaExplorer.require": "esm"
}