我创建了一个带有 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"
],
最佳答案
首先,在您的 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,
};
关于visual-studio-code - 在 vue-cli-3 项目上运行 Mocha Test Explorer 需要什么 babel 或其他设置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58867712/