Vue+jest Analog Asynchronous - Codes Helper - Programming Question Answer

Vue+jest Analog Asynchronous

1: first of all, I found a lot of web addresses by myself, but they didn"t work, and even the official website didn"t seem to work.

2: my question is how to simulate async

3: the project is built using vue-cli3 with its own test module

req.js encapsulates axios, and does some parameter processing before sending it

export default function req () {
    // ...
    axios.post()
}

table.vue calls the fetch method to get asynchronous data

<template>...</template>
<script>
import req from "@/utils/req"
export default {
    methods: {
        fetch () {
            // ...
            req(data).then(() => {
                // ...
            })
        }
    
    }
}
</script>

< H2 > Supplementary test code < / H2 >

jest.mock("@/utils/req")
// wrapper = mount(vue)
it("-sharp-sharp fetch data success", (done) => {
        wrapper.vm.fetch()
        wrapper.vm.$nextTick(() => {
          expect(wrapper.vm.cloneConfig).toEqual(mockData)
          done()
     })
 })

table.vuefetchreqmock

< H2 > reported this error. = 3 = I don"t understand. I use the table component of element. In my fetch function, req gets the data and binds it < / H2 >.

how can I use jest to test whether the fetch function is executed correctly and that req can return data

or how do I use jest to simulate the req function so that it doesn"t actually make a network request, but returns the simulation data I set

or there is a boss who can give a similar example, I will make a reference

// api/bank.ts import axios from '@/assets/utils/axios'; import { AjaxData } from '@/store/types'; import { PREFIX } from './types'; // export interface BankItem { nameCode: string; // name: string; // icon: string; // logo url singleNumLimit: number; // : singleDayLimit: number; // : } export interface GetSupportBankListReturn { list: BankItem[]; } export function getSupportBankList(showLoading = true) { return axios.get<AjaxData<GetSupportBankListReturn>>( `${PREFIX}/BankCardService/getSupportBankList`, { showLoading, }, ); }

// BankLimitTable.vue import { getSupportBankList } from '@/api/bank'; created() { getSupportBankList().then(({ data: resData }) => { const { code, data } = resData; if (!code && data && data.list) { this.banckLimitList = data.list; } }); }

// bankLimitTable.test.ts import { shallowMount } from '@vue/test-utils'; import BankLimitTable from './BankLimitTable.vue'; import flushPromises from 'flush-promises'; import * as Api from '@/api/bank'; jest.mock('@/api/bank'); // mock api // mock (Api.getSupportBankList as any).mockImplementation(() => { return Promise.resolve({ data: { code: 0, data: { list: [ { icon: 'icon', singleDayLimit: 1900000, name: '', nameCode: 'BCC', singleNumLimit: 15000000, }, { icon: 'icon', singleDayLimit: '', name: '', nameCode: 'BCC', singleNumLimit: 15000000, }, ], }, }, }); }); describe('', () => { test('', async () => { const wrapper = shallowMount(BankLimitTable); await flushPromises(); expect(wrapper.vm.$data.banckLimitList.length).toBe(2); // expect( wrapper.find('table > tr:nth-child(2) > td:nth-child(3)').text(), ).toBe('1.9'); expect(wrapper.html()).toMatchSnapshot(); }); });