0

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

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);
  });
});

我的 sinon 间谍从来没有被叫过，我在上面尝试了几个不同的变体。监视这样的导入函数的最佳方法是什么？还是我在概念上以错误的方式接近这个？

4

2 回答 2

0

我认为 Edd 的答案在大多数情况下是最全面的，所以我将他标记为已接受的答案。但是，我想出的解决方法是Vue.prototype.$api = api在我的 main.js 文件中使 api 库成为全局服务 ()，然后在每次测试之前用存根覆盖全局。

describe('UploadForm.vue', () => {
  let wrapper;
  const uploadFile = sinon.stub().returns(Promise.resolve({ data: 0 }));
  beforeEach(() => {
    wrapper = mount(UploadForm, {
      globals: {
        $api: { uploadFile }
      }
    });
  });
  // ...
于 2017-05-24T17:36:29.747 回答
0

问题

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

您需要存根文件依赖项。

解决方案

一种方法是使用inject-loader.

脚步

安装注入加载器

npm install --save-dev inject-loader

在文件顶部，UploadForm使用inject-loaderand导入vue-loader：

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);
  });
});

更多信息

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

于 2017-05-24T08:28:40.123 回答