在 Nuxt 应用程序中使用 Jest 和 Sinon 进行单元测试答案

【问题标题】：Unit test with Jest and Sinon in a Nuxt application在 Nuxt 应用程序中使用 Jest 和 Sinon 进行单元测试
【发布时间】：2021-03-16 04:50:22
【问题描述】：

我正在向 Nuxt 应用程序添加单元测试，并且正在使用 Jest 和 Sinon 来存根函数。

我正在尝试存根 Axios 接听电话。

目前创建一个实例这样做：

return shallowMount(BarChart, {
  stubs: {
    highcharts: true
  },
  mocks: { $axios: axios }  
});

我的测试是这样的：

test('Call getList', async () => {
  const wrapper = factory()
  const expected = []
  const data = { data: { items: [{ id: 1 }, { id: 2 }] } }
  const stubFunc = sinon.stub(wrapper.vm.$axios, 'get').resolves(data)
  await wrapper.vm.getList()
  expect(wrapper.vm.chartOptions.series).toEqual(expected)
  stubFunc.restore()
})

我的测试通过了，但我在控制台中收到以下错误：

对正在发生的事情有任何想法吗？

【问题讨论】：

标签： vue.js jestjs nuxt.js sinon

【解决方案1】：

在做 shallowMount 的时候需要定义 axios stub。

例如：

const data = { data: { items: [{ id: 1 }, { id: 2 }] } }
return shallowMount(BarChart, {
  stubs: {
    highcharts: true,
  },
  mocks: { 
    $axios: jest.fn(() => Promise.resolve(data)),
  },  
});

你不需要使用 sinon，@vue/test-utils 和 jest 提供了模拟 axios 的方式。

【讨论】：