visual-studio-code - 在 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:“启用工作区文件夹”。开箱即用的 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，以便测试资源管理器找到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 Code 的 Mocha 测试资源管理器中运行这个开箱即用的 vue-cli-3 测试？这是我目前的猜测:

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

Answer 1

首先，在您的 devDependency 中添加 @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,
};