Невозможно проверить компонент Vue с помощью Jest: синтаксическая ошибка - неожиданный идентификатор - PullRequest
Новая
       13

Невозможно проверить компонент Vue с помощью Jest: синтаксическая ошибка - неожиданный идентификатор

0 голосов
/ 23 апреля 2019

Проект создается с помощью @ vue / cli @ 3.6.3.Это package.json 

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "test": "npm run lint && npm run test:unit",
  "test:unit": "jest --no-cache"
},
"dependencies": {
  "core-js": "^2.6.5",
  "vue": "^2.6.10"
},
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.6.0",
  "@vue/cli-plugin-eslint": "^3.6.0",
  "@vue/cli-service": "^3.6.0",
  "@vue/eslint-config-standard": "^4.0.0",
  "babel-eslint": "^10.0.1",
  "babel-jest": "^24.7.1",
  "eslint": "^5.16.0",
  "eslint-plugin-vue": "^5.0.0",
  "jest": "^24.7.1",
  "vue-jest": "^3.0.4",
  "vue-template-compiler": "^2.5.21"
},
"jest": {
  "transform": {
    "^.+\\.js$": "babel-jest",
    "^.+\\.vue$": "vue-jest"
  }
}

Это мой тест 

import Item from '../Item.vue'

describe('Item.vue', () => {
  test('sanity test', () => {
    console.log(Item)
  })
})

с компонентом Item.vue 

<template>
  <div>
    Item
  </div>
</template>

, и это результат

enter image description here

Я получаю ошибку в операторе импорта.Я думал, что это будет решено с помощью шутливых трансформаторов, но это не так.Что еще мне нужно добавить, чтобы пройти тесты?URL проекта это .

Ответы [ 2 ]

1 голос
/ 10 мая 2019

Полагаю, вы получили это за то, что прочитали книгу тестирования Эдда Йербурга.Код, который доступен по адресу https://www.manning.com/books/testing-vue-js-applications.

У меня возникла та же проблема, и, проверив разницу между моим кодом и их кодом в главе 3, мы нашли исправление, которое состояло в том, что babel.config.js требует добавления: 

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true
process.env.VUE_CLI_BABEL_TARGET_NODE = 'node'

module.exports = {
  presets: [
    '@vue/app'
  ]
}

Удачи!

0 голосов
/ 23 апреля 2019

Вы никогда не определяли ни одного компонента Предмета.Единственный файл, который у вас есть в вашем проекте, это Item.vue, который содержит только шаблон, для vuejs нет способа импортировать «Item», так как вы никогда не объявляли свой шаблон как «Item».

Вам следует ознакомиться с VueJS Документацией о компонентах !В первом примере вы можете увидеть, как выполняется привязка classname-template.

Тогда вы сможете импортировать «Item» из Item.vue.

...