vue 2.0版本elementui test unit单元测试 mock axios vuex $route_element ui 测试版本

记录一下，遇到的问题

1.vue 页面包含vuex ，axios

//引用mount，能够加载elementui组件的HTML
import { shallowMount, mount, createLocalVue, RouterLinkStub} from "@vue/test-utils";
 
import Sample from "@/views/BookIndex.vue"; 
 
import mockAxios from "axios";
//axios 接口文件
import api from '@/api'
//vuex 文件
import vuextest from '@/store'
 // elementui 组件
import ElementUI from 'element-ui'
 
const localVue = createLocalVue()
//挂载elementui
localVue.use(ElementUI)
 
//模拟Header里面的this.$route.path
const routes = {
   path: '/test',
   component: Sample, 
}; 
const routertest= {
  push: jest.fn(),
}
 
 
 
const booklist = api  
 
 
 
describe("Sample.vue", () => {
  //模拟返回的数据
  const response = {
    data:{
      data:[    //这个data的属性名和.vue文件中axios中res.data.data;的第二个data名称是一样的
        {"bookId":10100,"bookName":"w_1","buyTime":"2021/02/28","bookBuyer":"test","bookBorrower":"test","bookVolume":1}
      ]
    } 
  };
 //模拟调用的axios接口
  mockAxios.get.mockReturnValue(Promise.resolve(response));
 
  const wrapper = mount(Sample, {
    sync: false,
    localVue, 
    // router,          
    mocks: { 
      $route: routes, 
      $router: routertest,    
      $api: booklist,
      $store: vuextest
    },
    stubs: { 
      'router-link': RouterLinkStub ,
      // 'Header':Header
    },
  });
 
  it("axios store", async() => {
 
    expect(wrapper.exists()).toBe(true);
    //get 是否调用了一次
    expect(mockAxios.get).toHaveBeenCalledTimes(1);
 
    expect(mockAxios.get).toBeCalledWith(
      "http://xx.xx.xx.xx:3030/findbook/all", {"params": {"searchBook": "", "searchBuyer": "", "selectSort": "在录"}}
    );
 
    // 点击搜索，也调用了一次
    await wrapper.find('button').trigger('click',{button: 0})
    expect(mockAxios.get).toHaveBeenCalledTimes(2);
    // 点击页数
    var page =  wrapper.findAll('.el-pager .number').at(1)
    page.trigger('click')
 
    await wrapper.vm.$nextTick()
    console.log(page.text()); 
 
    //snapshot生存dom的html文件
    expect(wrapper).toMatchSnapshot();
    // expect(wrapper.vm.tableArr.length).toBe(1);
    wrapper.destroy()
  });
});

2，api vuex见下图

关于mocks axios问题，需要在tests文件夹下建立__mocks文件

详细代码可见github地址GitHub - QianYiYi/vue-test-unit-mock-axios-vuex