当我用 sinon 提交表单时，如何测试函数是否被调用？

Question

简介：

我想测试如果我点击提交按钮，onSubmit 函数被调用。根据我阅读文档时的理解，我认为这是可能的：

预期输出：

让测试达到运行并告诉我通过还是失败

实际输出：

none，我目前卡在以下位置：

上下文：

在我的测试中：

import NavBar from '@/components/layout/NavBar.vue'

在该组件中我有一个（此处为简化版本）表单：

<b-nav-form @submit="onSubmit"> <b-form-input /> <b-button type="submit">Search</b-button> </b-nav-form>

我想测试如果我点击提交按钮，onSubmit 函数被调用。

我的设置是 Vue、BootstrapVue 和 Sinon。我知道我必须设置一个侦听被调用函数的间谍。

如果有帮助的话，这是我组件中的实际脚本：

<script>
  export default {
    data () {
      return {
        query: ''
      }
    },
    methods: {
      onSubmit () {...}
    }
  }
</script>

我理解的例子：

it('a true example', () => {
    var f = {
      onSubmit: function(query) {
        this.query = query;
      }
    }
    var onSubmitSpy = sinon.spy(f, 'onSubmit');
    f.onSubmit('Club')

    console.log(onSubmitSpy.callCount); // is 1
    onSubmitSpy.restore();
  })

但这与单击表单中的按钮没有关联。

请指教

Answer 1

测试vue组件函数被调用的思路是：

使用 vue-test-utils mount 或 shallowMount 创建测试组件。
在 options 中传递一个 methods 参数以提供间谍。
在调用侦测方法的组件中执行操作，然后断言该方法确实被调用了。

我没有sinon经验，我只是用jest测试vue组件，但事情应该是这样的：

  import NavBar from '@/components/layout/NavBar.vue'
  import {shallowMount} from 'vue-test-utils';

  it('asserting onSubmit calls', () => {

    // given

    var onSubmit = sinon.spy();
    var wrapper = shallowMount(NavBar, {
      methods: {
        onSubmit();
      }
    });
    var vm = wrapper.vm;

    // when
    vm.onSubmit();

    // then (I dont really dont know if this is valid sinon syntax)
    assertTrue(onSubmit.called);
    // or, with jest syntax:
    // expect(onSubmit).toHaveBeenCalled(); 

  })

现在，代码片段 应该可以工作 ，但是这个测试存在问题：我们断言当我们调用组件 onSubmit 时， onSubmit 间谍被召唤。这不是什么好事。

您的测试可能需要断言如下内容：当 <b-nav-form> 组件发出 submit 事件时，然后 onSubmit 间谍接到电话。

这将是一个更复杂的测试，原因有二：

因为涉及到一个child组件。要在 vue-test-utils 测试中真正渲染 child 组件，您需要使用 mount 而不是 shallowMount。这很难，因为你需要提供 childs 道具和依赖项，所以习惯 shallowMount and mount differences.
当您开始测试事件时，可能会涉及一些同步，因此您需要等待事件传播并调用您的组件方法。这通常涉及将 done 回调传递给 it() 块。

当我用 sinon 提交表单时，如何测试函数是否被调用？

How to test if a function is called when I submit a form with sinon?

javascript

unit-testing

sinon

vue-test-utils

bootstrap-vue