Модульное тестирование Vue Component - Jest Setup - Unexpected Identifier error
Я новичок в Jest и пытаюсь запустить простой модульный тест, чтобы убедиться, что все настроено правильно, и я столкнулся с множеством проблем, устраняя ошибки во время компиляции.
При запуске пакета тестирования Jest успешно находит файл, который я пытаюсь проверить, и генерирует следующее сообщение об ошибке «Неожиданный идентификатор» в строке 1. Есть идеи, почему это так? чего-то не хватает? Я уже довольно давно пытаюсь решить эту проблему.
/Users/foo/Sites/test/Test.spec.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import Test from './Test.vue';
^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:403:17)
Обратите внимание, что полное удаление операторов импорта запускает тест успешно. Однако вся причина, по которой я установил Jest, заключалась в том, чтобы протестировать компоненты vue.
Test.vue
<template>
<div class = "test">
</div>
</template>
<script>
export default {
name: 'test',
components: { },
data() {
return {
}
},
methods: {
helloWorld() {
return 'hello world';
}
}
}
</script>
Test.spec.js
import Test from './Test.vue'
describe('Test',() => {
it('test', () => {
expect(true).toBe(true);
});
});
package.json
"devDependencies": {
"@vue/test-utils": "^1.0.0-beta.25",
"axios": "^0.18.0",
"babel-core": "^6.26.0",
"babel-jest": "^23.6.0",
"babel-loader": "^7.1.2",
"cross-env": "^5.1.1",
"file-loader": "^2.0.0",
"jest": "^23.6.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.14.3",
"source-map-support": "^0.5.9",
"vue": "^2.5.7",
"vue-jest": "^3.0.0",
"vue-test-utils": "^1.0.0-beta.11",
"webpack": "^3.8.1"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
".*\\.(vue)$": "vue-jest",
"^.+\\.js$": "babel-jest"
}
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В своем тесте вы используете функции ES6, а именно оператор импорта, поэтому вам необходимо скомпилировать их до ES5 с использованием предустановки.
Создайте babel.config.js и добавьте @ babel / preset-env, например,
//babel.config.js
module.exports = {
presets: ["@babel/preset-env"]
};
Затем в вашем package.json под настройкой jest дайте jest знать, где находится корень вашего тестового кода и каталоги модулей, который будет рекурсивно искать с помощью шутки, например,
//package.json
"roots": [
"test"
],
"moduleDirectories": [
"test",
"node_modules"
],