Какие настройки babel или другие параметры мне нужны для запуска Mocha Test Explorer в проекте vue-cli-3?

Я создал проект vue3 cli с тестированием Mocha:

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, чтобы Test Explorer нашел папку vue «tests», которая отличается от «test» по умолчанию.

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

И затем получите эту ошибку в Test Explorer:

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

SyntaxError: Cannot use import statement outside a module

Это указывает на то, что мне нужно выполнить некоторую работу по транспиляции, а Mocha Test Explorer указывает способ сделать это с помощью полей «mochaTestExplorer» в settings.json, но я не уверен, какая комбинация пакетов babel потребуется. Что нужно сделать, чтобы запустить готовый тест vue-cli-3 в Mocha Test Explorer в Visual Studio Code? Вот мое текущее предположение:

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

visual-studio-code babeljs mocha.js vue-cli-3
person mpr    schedule 14.11.2019    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Боюсь, то, что вы хотите, невозможно - проблема в том, что недостаточно правильно настроить Babel. Компоненты одного файла Vue (.vue) должны обрабатываться Vue Loader, который является подключаемым модулем загрузчика Webpack.

И нет простого способа настроить Mocha Test Explorer для использования веб-пакета, как указано самим автором в эта тема — Поддержка проектов vue cli

Поэтому я решил разделить свои тесты на две группы: tests/ui (тесты с использованием компонентов Vue) и tests/unit (тесты без пользовательского интерфейса) и использовать настройки, описанные Фернандо, со следующими изменениями:

Настройте Mocha Test Explorer для поиска только тестов, не связанных с пользовательским интерфейсом:

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

пакет.json:

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

... чтобы включить обе папки при запуске тестов из командной строки

Примечание: Последний шаг - модификация babel.config.js - не нужен, без него все работает нормально....

person Michal Levý    schedule 24.04.2020
comment
Спасибо! Знать, что что-то просто невыполнимо, приносит большое облегчение. - person mpr; 24.04.2020

arrow_upward
1
arrow_downward

Сначала добавьте @babel/register к своему devDependencies.

После этого добавьте в код 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,
};
person Fernando Franco    schedule 02.03.2020
comment
Я получаю сообщение об ошибке: не удается найти модуль «@/components/HelloWorld.vue» в example.spec.js. Я чувствую, что это ближе, но мне все еще нужно получить все настройки, которые Vue использует с Babel, верно? - person mpr; 02.03.2020

arrow_upward
0
arrow_downward

На немного другом конфиге у меня работало: в .vscode/settings.json

{
    "mochaExplorer.require": "esm"
}

esm также должен быть в ваших зависимостях разработчика

person Quentin Rossetti    schedule 06.10.2020