vue+jest 模拟异步

Question

1： 首先我自己找了很多网址看了，都没生效，官网也看了，好像还是不行

2： 我的问题是如何模拟异步

3: 项目使用vue-cli3 搭建，自带test模块

req.js 封装了axios，在发送之前做了一些参数处理

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

table.vue 调用fetch方法，获取异步数据

<template>...</template>
<script>
import req from '@/utils/req'
export default {
    methods: {
        fetch () {
            // ...一些操作
            req(data).then(() => {
                // ...一些操作
            })
        }
    
    }
}
</script>

补充测试代码

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

在table.vue的fetch函数打印req，好像没有mock到

报了这个错误， =3=不懂啊，我用的是element的table组件，在我的fetch函数中req获取数据然后绑定上去

我怎么用jest测试这个fetch函数是否正确执行，而且req能返回数据

或者说我怎么用jest模拟req函数，让他不是真正地发出网络请求，而是返回我设定的模拟数据

或者有大佬能给出类似的例子，我做参考

Answer 1

那你需要mock axios才行

Answer 2

今天也遇到这个问题了虽然该帖子提的比较久了，我还是来回答下就当记录吧，经过尝试有两种方式可以实现：

1. mock需要使用的api文件，
2. mock整个ajax;

第一种方式

// 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();
  });
});

第二种方式
详见 这篇帖子下的高赞回答

Answer 3

亲，你这个问题解决了吗？我也遇到了同样的问题。。。