Javascript 使用avoriaz装载vue实例，但无法监视导入的函数

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

我有以下测试，它使用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);
  });
});

---

我的sinon间谍从未被呼叫过，我在上面尝试了几种不同的变体。监视这样的导入函数的最佳方法是什么？还是从概念上讲，我的做法是错误的？

问题

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

您需要存根文件依赖项

解决方案

一种方法是使用

步骤

安装注入加载器

npm install --save-dev inject-loader

在文件顶部，使用

inject loader

和

vue loader

导入

UploadForm

：

import UploadFormFactory from '!!vue-loader?inject!@/components/UploadForm';

这是一个工厂函数，返回带有依赖项存根的

UploadForm

现在，在您的测试中，您需要调用

UploadFormFactory

，并使用您想要的依赖项：

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

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

因此，您的测试文件将如下所示：

import { mount } from 'avoriaz';
import { expect } from 'chai';
import sinon from 'sinon';
import UploadFormFactory from '!!vue-loader?inject!@/components/UploadForm';

describe('upload', () => {
  it('passes form data to api.uploadFile', () => {
    const api = {
      uploadFile: sinon.spy()
    };

    const UploadForm = UploadFormFactory({
      '@/lib/api': api
    })
    const testFormData = { test: 'test' };
    const api = {
      uploadFile: sinon.spy()
    };
    const wrapper = mount(UploadForm);
    wrapper.vm.upload(testFormData);
    expect(api.uploadFile.called).to.equal(true);
  });
});

更多信息

---

我在这里写了一篇更详细的教程-

我认为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 }
      }
    });
  });
  // ...

---

你就是那个人。尽管昨晚我以不同的方式完成了这项工作，但在将来的其他事情中我肯定会需要这个注入加载程序方法，所以非常感谢您提供的信息！

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