4

在对我的组件进行单元测试（使用 TypeScript 和 编写vue-class-component）时，我使用 Sinon 来存根 API 调用。将存根添加到单元测试后，仍在调用原始方法（不返回存根值）。

it('should set the text to bar', async () => {

  const stubbedApiResponse = () => {
    return 'bar';
  };

  sinon.stub(MyComponent.prototype, 'getFoo').callsFake(stubbedApiResponse);

  let options = {
    template: '<div><my-component></my-component></div>',
    components: {'my-component': MyComponent},
    store: this.store
  };
  this.vm = new Vue(options).$mount();

  Vue.nextTick(() => {
    expect(this.vm.$el.querySelector('.text').textContent).toBe('bar'); // Still equals 'foo'
  });
});

我试图存根的方法mounted在组件中被调用并设置文本内容。任何帮助将不胜感激，谢谢！

4

1 回答 1

1

问题是，当使用带有 的 TypeScript 类时vue-class-component，导出类的属性中的methodslive对象options，因此，要存根方法，您必须这样做：

sinon.stub(MyComponent.options.methods, 'getFoo').callsFake(stubbedApiResponse)

如果您的测试通过了更改，请忽略以下所有内容。

我在代码中看到了几个不相关的问题：

  • 使用 PhantomJS 时，使用没有意义，async因为无论如何Vue.nextClick都不会使用；使用mocha提供Promises的功能更简单：done

    it('...', (done) => {
  // ...
  Vue.nextTick(() => {
    // ...
    done()
  }
}

  • chai'sbe是一个链，不测试是否相等；equal应该使用，例如：expect(foo).to.equal('bar').

  • 最好将其保留vm为变量而不是属性，以避免引用问题：

    const vm = //...
nextTick(() => { expect(vm.$el)//... }
于 2017-10-21T04:10:51.913 回答