运行 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 Test Explorer 扩展，重新启动，将文件夹添加到工作区，单击文件夹，ctrl-shift-p 和 Mocha Test Explorer："Enable for a workspace folder"。开箱即用的 Mocha Test Explorer 似乎不喜欢 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，以便Test Explorer 找到vue "tests" 文件夹，这与"test" 的默认值不同。

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

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

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

SyntaxError: Cannot use import statement outside a module

这表明我有一些转译工作要做，Mocha Test Explorer 指出这样做的方法是 settings.json 中的 "mochaTestExplorer" 字段，但我不确定 babel 的组合包将是必需的。在 Visual Studio 代码中，运行 Mocha Test Explorer 中的这个开箱即用的 vue-cli-3 测试应该做什么？这是我目前的猜测：

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

Answer 1

首先，在你的 devDependencies 中添加 @babel/register。

之后，添加您的 Visual Studio 代码 settings.json:

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

最后，将你的 babel.config.js 改成这样：

const presets = [];

if (process.env.NODE_ENV === 'test') presets.push('@babel/preset-env');
else presets.push('@vue/cli-plugin-babel/preset');

module.exports = {
  presets,
};

Answer 2

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

并且没有简单的方法来设置 Mocha Test Explorer 以使用 webpack，正如作者自己在 this thread - Support for vue cli projects

中所指出的那样

所以我决定将我的测试分成两组，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 - 不需要，没有它一切正常....

Answer 3

在稍微不同的配置上，我为我工作：在 .vscode/settings.json

{
    "mochaExplorer.require": "esm"
}

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

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

What babel or other settings do I need to run Mocha Test Explorer on a vue-cli-3 project?

mocha.js

babeljs

visual-studio-code

vue-cli-3