我在 vuetify 中编写了许多可重用的组件。我正在使用 Jest 测试框架进行单元测试。当我运行“npm run test”时，测试失败并显示“SyntaxError: Unexpected identifier”。
我所有的 babel 配置和 jest 配置都在 package.json 文件中。当我创建一个没有任何 vuetify 组件的规范文件时，测试有效。但是一旦我添加了 vuetify，它就会扭曲。我首先使用@vue/test-utils 中的 localValue 来使用 vuetify。它没有用。然后我使用了 Vue.use(Vuetify)，但仍然没有用。
包.json
{
"name": "xyz",
"version": "0.2.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test": "jest",
"clear_jest": "jest --clearCache"
},
"dependencies": {
"@contentful/rich-text-html-renderer": "^13.0.0",
"@storybook/addon-a11y": "^4.1.4",
"avoriaz": "^6.3.0",
"axios": "^0.18.0",
"axios-mock-adapter": "^1.16.0",
"contentful": "^7.3.0",
"deepdash": "^1.9.5",
"eslint": "^5.15.3",
"jest": "^24.5.0",
"jest-serializer-vue": "^2.0.2",
"json-server": "^0.14.2",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"nightwatch": "^1.0.19",
"node-sass": "^4.11.0",
"purgecss": "^1.1.0",
"sass-loader": "^7.1.0",
"storybook-vue-router": "^1.0.2",
"tailwindcss-aspect-ratio": "^1.0.1",
"tailwindcss-gradients": "^1.1.0",
"tailwindcss-transition": "^1.0.5",
"vee-validate": "^2.2.2",
"vue": "^2.5.19",
"vue-faq-accordion": "^1.2.1",
"vue-jest": "^3.0.4",
"vue-router": "^3.0.2",
"vue-template-compiler": "^2.5.20",
"vuelidate": "^0.7.4",
"vuetify": "^1.5.7",
"vuex": "^3.1.0",
"vuex-persist": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/preset-env": "^7.3.4",
"@storybook/addon-actions": "^4.1.0",
"@storybook/addon-links": "^4.1.0",
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.1",
"@vue/cli-service": "^3.2.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"babel-preset-vue": "^2.0.2",
"chromedriver": "^2.46.0",
"concurrently": "^4.1.0",
"cross-env": "^5.2.0",
"cucumber": "^5.1.0",
"cucumber-html-reporter": "^4.0.5",
"cucumber-pretty": "^1.5.0",
"eslint": "^5.15.3",
"geckodriver": "^1.16.0",
"http-server": "^0.11.1",
"jest-transform-stub": "^2.0.0",
"mkdirp": "^0.5.1",
"nightwatch-api": "^2.1.3",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-storybook": "^0.5.0",
"vue-cli-plugin-svg": "^0.1.2",
"vue-cli-plugin-tailwind": "^0.4.0",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-svg-loader": "^0.11.0",
"vue-template-compiler": "^2.5.21",
"vuetify": "^1.5.7",
"vuetify-loader": "^1.0.5"
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"modules": "commonjs",
"targets": {
"node": "current"
}
}
]
]
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": [
"> 5%",
"last 5 versions",
"not ie <= 10"
],
"jest": {
"moduleFileExtensions": [
"js",
"vue"
],
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/src/$1",
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"snapshotSerializers": [
"<rootDir>/node_modules/jest-serializer-vue"
],
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!vuetify)"
],
"transform": {
".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
}
}
}
工具栏.vue
<template>
<div>
<v-toolbar class="toolbar" height="70">
<v-toolbar-title class="toolbar-title" @click="goToHome()">{{ title }}</v-toolbar-title>
<v-spacer></v-spacer>
<Profile v-if="user.status"/>
</v-toolbar>
</div>
</template>
<script>
import Profile from '@/components/Profile'
export default {
props: {
title: {
type: String,
required: true
}
},
components: {
Profile
},
methods: {
goToHome() {
this.$router.push('/home')
}
}
}
</script>
<style scoped lang="postcss">
.toolbar-title {
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.toolbar {
@apply bg-secondary !important;
}
</style>
工具栏.spec.js
import { shallowMount } from '@vue/test-utils'
import Toolbar from '@/components/List'
import Vuetify from 'vuetify'
import Vue from 'vue'
describe('Toolbar.vue', () => {
let wrp
beforeEach(() => {
Vue.use(Vuetify)
wrp = shallowMount(Toolbar)
})
it('Toolbar is a vue instance', () => {
expect(wrp.isVueInstance()).toBeTruthy()
})
})
期望的结果应该是:
> jest
PASS test/unit/component/Toolbar.spec.js
Toolbar.vue
√ Toolbar is a vue instance (21ms)
Test Suites: 1 passed, 1 total
Tests: 1 passed, 1 total
Snapshots: 0 total
Time: 4.882s
Ran all test suites.
实际: C:\rahul13615>npm 运行测试
> myproject@0.2.0 test C:\rahul13615\
> jest
FAIL test/unit/component/Toolbar.spec.js
● Test suite failed to run
C:\rahul13615\node_modules\@babel\runtime-corejs2\helpers\esm\typeof.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import _Symbol$iterator from "../../core-js/symbol/iterator";
^^^^^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:451:17)
at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:493:19)
at Object.<anonymous> (node_modules/vuetify/dist/vuetify.js:91:39)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 6.328s
Ran all test suites.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! myproject@0.2.0 test: `jest`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myproject@0.2.0 test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
最佳答案
@barakbd 实际上是对的，不知道为什么他的回答被否决了。
您可以先尝试使用 jest --clearCache 手动清除缓存，如果不起作用，重启应该会有所帮助，这似乎会清除另一个同样影响 jest 的缓存。
重启解决了我的问题。
关于vue.js - 如何在使用 jest 测试 vuetify 组件时解决 'SyntaxError: Unexpected identifier'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55654949/