如何编写一个实际项目的vue实例单元测试
最近一直苦恼怎么能跳过微信支付去测试之后的流程，后来想着单元测试可以跑通这个流程，而不需要手动去点击，全部都是以用户模拟的方式进行测试。
如果你还不知道如何在你的项目中加入jest,请参考我上一篇文章https://www.jianshu.com/p/d29679cb6a3a。
测试功能点描述
1. 用户进入页面，根据是单独购买还是拼团购买来判断价格是否正确。
```
it('Is price right',() => {
let expectedAmount = (mockData.activityInfo.leaderPrice / 100).toFixed(2);
if(mockData.purchaseMethod === 'single'){
// 是否为单独购买
expectedAmount = (mockData.couseInfo.price / 100).toFixed(2);
}
let price = wrapper.find('.price').text();
expect(price).toBe(`订单价格${expectedAmount}元`)
})
```
2. 模拟用户支付点击流程（支付成功,失败代码可在完整代码中查找）
```
it('pay success',async () => {
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '弹窗挽留状态')
// 触发点击事件
await wrapper.find('.pay-btn').trigger('click');
// 检查微信支付之前的接口是否被调用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// 检查是否触发了微信支付 且只允许调用一次
expect(wrapper.vm.payNumber).toBe(1)
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// 检查微信失败之后是否调起微信失败挽留弹窗
expect(wrapper.vm.payModalVisible).toBe(false)
console.log(wrapper.vm.payModalVisible, '弹窗挽留状态')
});
```
完整代码
/**
* jest 单元测试 拼团 panel组件
* 检查 支付是否成功
* * */
import {mount} from '@vue/test-utils';
import PayPanel from '../src/components/course/pay/panel.vue';
import orderPayModel from '../src/model/orderPay';
import sensors from '../src/utils/sensors';
jest.mock('../src/model/orderPay');
// eslint-disable-next-line key-spacing
const wechatPayFetchGetData = {"data":{"nonce_str":"kzR1IFgHY3aaHM2f","orderId":"1448573147930529793","paymentId":"T021448573148714864641","teamId":"1448573153471205377","sign":"6DEB1B8F75C6A6948C1AFCEC89716698","trade_type":"JSAPI","sign_type":"MD5","prepay_id":"wx14165527393910ea57ec63b239d54c0000","timestamp":1634201727},"code":0,"message":""}
jest.mock('../src/model/orderPay', () => ({
getPayGroup: jest.fn((params,callback) => {
callback(wechatPayFetchGetData.data);
})
}))
// 模拟微信支付失败
let paySuccess = true;
// 模拟class
jest.mock('../src/model/wx', () => {
return function(){
return {
pay: jest.fn((params,callback) => {
callback(paySuccess)
})
}
}
})
// 模拟神策埋点
jest.mock('../src/utils/sensors', () => ({
track: jest.fn((eventName, data, callback) => {
callback(true);
}),
webPage: jest.fn(( data, success) => {
success(true);
}),
webClick: jest.fn((eventName, data, callback) => {
callback(true);
}),
}))
global.fetch = require('node-fetch');
global.sensors = null;
// 模拟组件props真实数据 可根据自己项目实际数据模拟，因是公司的数据而无法展示
const mockData = {
// eslint-disable-next-line key-spacing
}
// describe 定义个一个测套组件
describe('payPanel test', () => {
// 挂载组建
const wrapper = mount(PayPanel, {
props: mockData
})
it('Is the closeButton trigger', () => {
wrapper.find('.iconclose').trigger('click');
// 是否有触发emit onclose
expect(wrapper.emitted()).toHaveProperty('onClose')
})
// 订单价格是否正确
it('Is price right',() => {
let expectedAmount = (mockData.activityInfo.leaderPrice / 100).toFixed(2);
if(mockData.purchaseMethod === 'single'){
// 是否为单独购买
expectedAmount = (mockData.couseInfo.price / 100).toFixed(2);
}
let price = wrapper.find('.price').text();
expect(price).toBe(`订单价格${expectedAmount}元`)
})
// 参与团员参团类别要求是否展示正确
it('Is the Group member type correct', () => {
let typeText = mockData.activityInfo.type === 1 ? '仅限新人' : '新老不限';
expect(wrapper.find('.type-member').text()).toBe(typeText)
// expect(wrapper.find('.type-member1'))
})
// 检查 单独购买和拼团是否正确
it('Is the single pay correct', () => {
let isSingle = mockData.purchaseMethod === 'single';
expect(wrapper.find('.single-pay').exists()).toBe(isSingle)
})
// 测试一下正则 对比 tobe
it('test regexp', () => {
let x = new RegExp('aa');
let y = new RegExp('aa');
expect(x).toEqual(y)
})
// 支付成功
it('pay success',async () => {
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '弹窗挽留状态')
// 触发点击事件
await wrapper.find('.pay-btn').trigger('click');
// 检查微信支付之前的接口是否被调用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// 检查是否触发了微信支付 且只允许调用一次
expect(wrapper.vm.payNumber).toBe(1)
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// 检查微信失败之后是否调起微信失败挽留弹窗
expect(wrapper.vm.payModalVisible).toBe(false)
console.log(wrapper.vm.payModalVisible, '弹窗挽留状态')
});
// 支付失败
it('pay error',async () => {
paySuccess = false;
const payModalVisible = wrapper.vm.payModalVisible
console.log(payModalVisible, '弹窗挽留状态')
// 触发点击事件
await wrapper.find('.pay-btn').trigger('click');
// 检查微信支付之前的接口是否被调用
expect(orderPayModel.getPayGroup).toHaveBeenCalledTimes(1);
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// 检查是否触发了微信支付 且只允许调用一次
expect(wrapper.vm.payNumber).toBe(1)
// 检查是否正常埋点
expect(sensors.track).toHaveBeenCalledTimes(1);
// wx 支付失败 是否弹出支付挽留弹窗
expect(wrapper.vm.payModalVisible).toBe(true)
console.log(wrapper.vm.payModalVisible, '弹窗挽留状态')
});
})
