Я переместил проект из angularjs в Vue. После его перемещения я пытаюсь добавить юнит-тесты с помощью шутки. Я провел тесты для некоторых более мелких компонентов и служб, и они работают, как ожидалось, без проблем. Сейчас я пытаюсь добавить тесты и несколько более сложных компонентов, и теперь я получаю сообщение об ошибке только для этого набора тестов. Ошибка заключается в следующем.
E:\Development\work\project\node_modules\@babel\runtime\helpers\esm\asyncToGenerator.js:17
export default function _asyncToGenerator(fn) {
^^^^^^
SyntaxError: Unexpected token 'export'
Компонент, который я пытаюсь протестировать, имеет несколько свойств данных и дочерние компоненты.
Основная c суть
<template>
<div>
<div v-if="allowed">...</div>
<ChildComponent />
</div>
<script>
import ChildComponent from './ChildComponent';
import {getIsAllowed} from './allowed.service.js';
export default {
name: 'Parent',
data() {
return {
allowed: getIsAllowed();
}
}
</script>
Есть еще кое-что, но это не имеет отношения к проблеме, с которой я столкнулся.
Проблема в ChildComponent входит. Это похоже на следующее.
<template>
<div>...</div>
</template>
<script>
import {functionThatCallsAyncFunction} from 'fileThatContainsAsyncFunctions'
</script>
Мой тестовый сценарий выглядит следующим образом:
import {mount} from '@vue/test-utils';
import Parent from './Parent';
describe('my tests', () => {
test('verify tests run', () => {
expect(true).toBe(true);
})
})
Это вызывает ошибку, которую я вижу.
Я могу удалить импорт родительского компонента, чтобы избавиться от ошибки.
Я также могу удалить импорт дочернего компонента из родительского, чтобы исправить ошибку.
Я также могу удалить импорт функции, которая вызывает функцию asyn c в Child, чтобы исправить ошибку.
И я могу изменить функцию с async / await для использования. then (), и он будет работать.
shallowMount и заглушки не имеют никакого эффекта, поскольку тестовые бомбы не дойдут до этой точки.
Должно быть что-то, что мне не хватает, что делает асинхронный c функции вообще не работают. Я возился с этим уже 2 дня, и Google предоставил много идей, но ни одна из них не сработала.
мой соответствующий пакет. json части
"scripts" : {
"test": "jest --config=jest.conf.js"
},
"devDependencies" : {
"@babel/core": "^7.1.6",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.6",
"@vue/babel-preset-app": "^3.11.0",
"@vue/test-utils": "^1.0.0-beta.26",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6",
"babel-loader": "^8.0.4",
"jest": "^23.6.0",
"jest-serializer-vue": "^2.0.2",
"vue-jest": "^3.0.1"
}
jest.conf. js простой
const {defaults} = require('jest-config');
module.exports = {
moduleFileExtensions: [...defaults.moduleFileExtensions, 'vue'],
transform: {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest"
},
'setupFiles': ['./tests/setup.js']
};
как мой babel.config. js
module.exports = {
presets: [
'@vue/app',
['@babel/preset-env', {targets: { node: 'current'}}],
],
};
, если потребуется какая-либо другая информация, я буду рад ее предоставить. Это сводит меня с ума. Надеюсь, у кого-то есть идеи, которые помогут заставить это работать так, как я ожидал.
Заранее спасибо.