使用Jest和Vue测试工具对Vue进行单元测试

Question

我是vue单元测试的新手。我正在尝试对导航vue组件进行单元测试。我一开始很简单，我只是想测试一个只会使布尔值为false(由点击触发(的方法。我也在使用vuetify。我设法模仿了一个按钮，然后我希望我传递的变量(showLoginDrawer(在单元测试中返回false。我的错误是TypeError:_vm.is.has不是一个与我代码的不同部分相关的函数，我想我遗漏了一些东西，但我在网上找不到任何关于它的信息。

下面我已经包含了组件和我的测试文件。

//Nav.vue
<template>
<v-btn
:to="{ name: 'home' }"
aria-label="Home button"
@click="hideDiv()"
>
</v-btn>
<div>
<transition name="nav-fade">
<component v-bind:is="drawerSection"></component>
</transition>
</div>
</template>
<script>
data() {
return {
drawerSection: function () {
if (this.is.has('learning')) {
return 'nav-learning'
} else {
return 'nav-explore'
}
},
}
},
methods: {
hideDiv() {
if (!this.appState.restrictedAccessAlert)
this.appState.showLoginDrawer = false
}
}
</script>
<style>//disregard</style>

//Nav.spec.js
import Vue from 'vue'
import Vuex from 'vuex'
import Vuetify from 'vuetify'
import { shallowMount, mount } from '@vue/test-utils'
import Nav from '@/components/Nav'

const localVue = createLocalVue()
localVue.use(Vuetify)
localVue.use(Vuex)
describe('Testing Nav component', () => {
let vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('Test Button click when logged out', () => {
const wrapper = mount(Navigation, {
data() {
return {
appState: {
showLoginDrawer: true,
lastCapabilityPath: '',
restrictedAccessAlert: false,
},
is: 'learning',
localVue,
vuetify,
}
},
})
const event = jest.fn()
const button = wrapper.findAll('.v-btn').at(0)
expect(button.text()).toContain('My Profile')
button.vm.$on('click', event)
expect(event).toHaveBeenCalledTimes(0)
expect(wrapper.vm.showLoginDrawer).toBeTruthy()
button.trigger('click')
expect(event).toHaveBeenCalledTimes(1)
expect(wrapper.vm.showLoginDrawer).toBeFalsy()
})
})

我得到错误：

TypeError: _vm.is.has is not a function

谢谢你的帮助！

Answer 1

哦，我的错误是has((是一个集合函数，因此它不能与字符串一起工作，所以我不得不使它等于一个集合。

更新代码：

test('Test Basic HTML rendering', () => {
const is = new Set(['learning', 'b', 'c'])
const wrapper = mount(Navigation, {
data() {
return {
appState: {
showLoginDrawer: true,
lastCapabilityPath: '',
restrictedAccessAlert: false,
},
is,
localVue,
vuetify,
}
},
})
wrapper.vm.$vuetify.breakpoint.smAndUp = true
expect(wrapper.html()).toContain('Log-in')
// check the name of the component
expect(wrapper.vm.$options.name).toMatch('NavProfile')
})

Answer 2

请尝试使用async&await，可能每个事件调用都是异步

describe('Testing Nav component', () => {
let vuetify
beforeEach(() => {
vuetify = new Vuetify()
})
test('Test Button click when logged out', async () => { // use async
const wrapper = mount(Navigation, {
data() {
return {
appState: {
showLoginDrawer: true,
lastCapabilityPath: '',
restrictedAccessAlert: false,
},
is: 'learning',
localVue,
vuetify,
}
},
})
const event = jest.fn()
const button = wrapper.findAll('.v-btn').at(0)
expect(button.text()).toContain('My Profile')
button.vm.$on('click', event)
expect(event).toHaveBeenCalledTimes(0)
expect(wrapper.vm.showLoginDrawer).toBeTruthy()
// Try use await at every event
await button.trigger('click')
expect(event).toHaveBeenCalledTimes(1)
expect(wrapper.vm.showLoginDrawer).toBeFalsy()
})
})