Create a demo of the unit test of a vue project
1. Create a new project vue webpack init unit-test
2. Create the component content.vue under src/components
<template>
<div class="content-wrap">
<h1 class="title">{
{
content }}</h1>
</div>
</template>
<script>
export default {
name: 'Content',
props: {
content: {
type: String,
default: 'Welcome to Your Vue.js App'
}
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>
3. Create content.spec.js under test/unit/specs
import {
shallowMount } from '@vue/test-utils'
import content from '@/components/content'
describe('Component.content', () => {
const wrapper = shallowMount(content, {
propsData: {
content: 'Hello'
}
})
it('传值正确', () => {
expect(wrapper.vm.content).toBe('Hello')
})
it('渲染正确', () => {
wrapper.setProps({
content: 'Hello World!'
})
expect(wrapper.find('.title').exists()).toBe(true)
})
})
4. Yarn add @vue/test-utils adds unit test utility library
5、yarn test
If you report an error, this blog has a solution: https://blog.csdn.net/qq_39367226/article/details/109247391
6. The running result is as follows, the demo of the first unit test is successful
