fix: 完善单测demo

This commit is contained in:
chenjinsong
2023-01-11 15:50:04 +08:00
parent d54054510b
commit 4fed5a9b8c
3 changed files with 50 additions and 18 deletions

View File

@@ -9,7 +9,9 @@ import { getNameByEventType } from '@/utils/tools'
import axios from 'axios'
// 模拟的axios返回数据
const mockPostList = { data: { id: 2, title: 'title2' } }
const mockId = { data: 2 }
const mockTitle = { data: 'title2' }
const mockCount = { data: 999 }
describe('单元测试demo', () => {
test('Vue组件--点击按钮后count的值+1', async () => {
@@ -19,11 +21,11 @@ describe('单元测试demo', () => {
const textNode = await wrapper.get('[test-id="count"]')
const button = await wrapper.get('[test-id="button"]')
// 断言文本dom的内容是否是'0'
expect(textNode.text()).toContain('0')
expect(textNode.text()).toBe('0')
// 模拟按钮dom点击执行click()方法
await button.trigger('click')
// 断言点击按钮后文本dom的内容是否是'1'
expect(textNode.text()).toContain('1')
expect(textNode.text()).toBe('1')
// 再次点击
await button.trigger('click')
// 断言点击按钮后文本dom的内容是否是'2'
@@ -31,22 +33,43 @@ describe('单元测试demo', () => {
/* 更多断言类型https://jestjs.io/docs/expect */
})
test('Vue组件--直接获取vue实例中的data和method', async () => {
// 模拟axios返回数据
axios.get.mockResolvedValue(mockPostList)
// 测试内容只有一个axios请求的时候
axios.get.mockResolvedValue(mockCount)
// 加载vue组件获得实例
const wrapper = mount(Test)
const textNode2 = await wrapper.get('[test-id="title"]')
const textNode = await wrapper.get('[test-id="count"]')
// 通过wrapper.vm.xxx直接执行click方法、获取data的数据
expect(wrapper.vm.count).toEqual(0)
expect(wrapper.vm.count).toBe(0)
await wrapper.vm.click()
expect(wrapper.vm.count).toBe(1)
expect(textNode2.text()).toEqual('title')
await wrapper.vm.getPosts()
await wrapper.vm.getCount()
await wrapper.vm.$nextTick(() => {
expect(textNode.text()).toBe('999')
})
})
test('Vue组件--多个axios请求', async () => {
// 模拟axios返回数据
// 测试内容有多个url不同的axios请求的话需分开写
axios.get.mockImplementation(url => {
switch (url) {
case '/api/getObjId':
return Promise.resolve(mockId)
case '/api/getObjTitle':
return Promise.resolve(mockTitle)
}
})
// 加载vue组件获得实例
const wrapper = mount(Test)
const textNode = await wrapper.get('[test-id="id"]')
const textNode2 = await wrapper.get('[test-id="title"]')
expect(textNode2.text()).toBe('title')
await wrapper.vm.getObj()
await wrapper.vm.$nextTick(() => {
expect(textNode.text()).toBe('2')
expect(textNode2.text()).toBe('title2')
expect(wrapper.vm.obj).toEqual({ id: 2, title: 'title2' })
})
})