Question

我有以下组件脚本（删除了一些不相关的位）：

import api from '@/lib/api';

export default {
  methods: {
    upload (formData) {
      api.uploadFile(formData).then(response => {
        this.$emit('input', response.data);
      });
    }
  }
};

我有以下测试，它使用avoriaz来安装Vue实例：

import { mount } from 'avoriaz';
import { expect } from 'chai';
import sinon from 'sinon';
import UploadForm from '@/components/UploadForm';

describe('upload', () => {
  it('passes form data to api.uploadFile', () => {
    const testFormData = { test: 'test' };
    const api = {
      uploadFile: sinon.spy()
    };
    const wrapper = mount(UploadForm);
    wrapper.vm.api = api;
    wrapper.vm.upload(testFormData);
    expect(api.uploadFile.called).to.equal(true);
  });
});

我的罪人间谍从未被召唤过，我在上面尝试了几种不同的变体。窥探这样的导入函数的最佳方法是什么？或者我在概念上接近这个错误的方式？

Answer 1

<强>问题

您需要存根api依赖项，这是文件的依赖项。这不能通过vue实例完成，因为api不是vue组件的一部分。

您需要存根文件依赖项。

<强>解决方案

执行此操作的一种方法是使用inject-loader。

<强>步骤

安装inject-loader

.current-session{
    //your style here
}

在文件顶部，使用npm install --save-dev inject-loader和UploadForm导入inject-loader：

vue-loader

这是一个工厂函数，返回带有依赖关系的import UploadFormFactory from '!!vue-loader?inject!@/components/UploadForm';。

现在，在您的测试中，您需要使用您想要存根的依赖关系调用UploadForm：

UploadFormFactory

所以你的测试文件看起来像是：

const api = {
  uploadFile: sinon.spy()
};

const UploadForm = UploadFormFactory({
  '@/lib/api': api
})

更多信息

我在这里写了一篇更详细的教程 - https://www.coding123.org/stub-dependencies-vue-unit-tests/

Answer 2

我认为Edd的回答是大多数场景中最具包容性的，所以我将他标记为已接受的答案。但是，我提出的解决方法是在我的main.js文件中使api库成为全局服务（Vue.prototype.$api = api），然后在每次测试之前用存根覆盖全局。

describe('UploadForm.vue', () => {
  let wrapper;
  const uploadFile = sinon.stub().returns(Promise.resolve({ data: 0 }));
  beforeEach(() => {
    wrapper = mount(UploadForm, {
      globals: {
        $api: { uploadFile }
      }
    });
  });
  // ...

使用avoriaz挂载vue实例，但不能对导入的函数进行sinon间谍

2 个答案: