如何开玩笑地模拟 VueAxios

Posted

技术标签:

【中文标题】如何开玩笑地模拟 VueAxios【英文标题】:How to mock VueAxios in jest 【发布时间】:2020-11-18 20:25:16 【问题描述】:

我想测试我的 Api 函数,它们位于 vue 组件之外的单独文件中。在这个方法中,我通过 Vue.axios 调用 api,但我找不到像这篇文章中那样模拟和测试它的方法:

How do I test axios in jest

示例方法:

cancelAuction: function (auction_id) 
    if (validateApiInt(auction_id)) 
      return Vue.axios.delete(`/auctions/$auction_id`);
    
    return ;
  ,

示例用法:

const response = await AuctionApi.cancelAuction(id);

【问题讨论】:

【参考方案1】:

好的,这很明显。我不得不像下面这样模拟整个 Vue:

jest.mock('vue', () => (
  axios: 
    get: jest.fn()
  ,
));

【讨论】:

【参考方案2】:

刚开始学习 Jest + @vue/test-utils。对于那些想要模拟“vue-axios”的人来说,这是一个简单的例子。

// @/components/Helloword.vue

<template>
  <div>
    <h1>Email: <span> email </span></h1>
    <button @click="fetchData">Get Random Email</button>
  </div>
</template>

<script>
export default 
  name: 'HelloWorld',
  data() 
    return 
      email: '',
    ;
  ,
  methods: 
    async fetchData() 
      const res = (await this.axios.get('https://randomuser.me/api/')).data
        .results[0].email;
      this.email = res;
    ,
  ,
;
</script>

--

    // test/unit/example.spec.js

import  mount  from '@vue/test-utils';
import HelloWorld from '@/components/HelloWorld.vue';
import axios from 'axios';

jest.mock('axios', () => (
  get: () =>
    Promise.resolve(
      data: 
        results: [ email: 'mockAxios@email.com' ],
      ,
    ),
));

describe('HelloWorld.vue', () => 
  it('click and fetch data...', async (done) => 
    const wrapper = mount(HelloWorld, 
      mocks: 
        axios,
      ,
    );

    await wrapper.find('button').trigger('click');

    wrapper.vm.$nextTick(() => 
      expect(wrapper.find('h1').text()).toContain('@');
      done();
    );
  );
);

【讨论】:

以上是关于如何开玩笑地模拟 VueAxios的主要内容,如果未能解决你的问题,请参考以下文章

如何开玩笑地模拟文件夹中的所有文件

如何开玩笑地模拟 i18next 模块

我如何开玩笑地模拟 react-i18next 和 i18n.js?

如何使用 Jest 模拟异步函数

开玩笑地从模拟文件中窥探模拟函数

开玩笑如何模拟 api 调用