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

Question

我已经创建了一个使用vue3测试的Mocha 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)
  })
})

我将此条目添加到测试中，以便Test Explorer找到vue“settings.json”文件夹，该文件夹与默认的"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

我担心你想要的是不可能的-问题是正确设置Babel是不够的。Vue单文件组件(.vue)需要由Webpack插件Vue Loader处理。

而且没有简单的方法来设置Mocha Test Explorer来使用作者自己在this thread - Support for vue cli projects中指出的webpack

所以我决定将我的测试分成两组，tests/ui (使用Vue组件的测试)和tests/unit (非ui测试)，并使用费尔南多描述的设置，并进行以下修改：

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

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

package.json：

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

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

注意:最后一步-修改babel.config.js -是不需要的，没有它一切都很好...

Answer 2

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

之后，在Visual Studio Code 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 3

在略有不同的配置下，我为自己工作:在.vscode/settings.json中

{
    "mochaExplorer.require": "esm"
}

esm也应该在你的开发依赖中