vite + vue3.0使用jest测试初体验（二）

如何编写一个实际项目的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, '弹窗挽留状态')

    });

})