javascript - 使用 sinon 提交表单时如何测试函数是否被调用？

Question

简介:

我想测试一下，如果单击提交按钮，则会调用 onSubmit 函数。我认为根据我阅读文档时的理解，这是可能的:

1. https://sinonjs.org/releases/v6.1.5/spies/
2. https://vue-test-utils.vuejs.org/guides/#testing-key-mouse-and-other-dom-events

预期输出:

• 运行测试并显示通过或失败

实际输出:

• 没有，我目前陷入以下困境:

上下文:

在我的测试中:

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。我知道我必须设置一个监听正在调用的函数的 spy 。

这是我的组件中的实际脚本(如果有帮助的话):

<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 组件函数的想法是:

1. 使用 vue-test-utils 创建测试组件mount或shallowMount .

2. 通过 methods options 中的参数提供 spy 。

3. 在调用监视方法的组件中执行操作，然后断言该方法确实被调用。

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

  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 spy 被召唤。这并不是什么了不起的事情。

您的测试可能需要断言以下内容:当 <b-nav-form>组件发出 submit事件，然后onSubmit spy 被召唤。

这将是一个更复杂的测试，原因有两个:

1. 因为涉及到子组件。真正渲染 vue-test-utils 中的子组件测试时，需要使用mount而不是shallowMount 。这很困难，因为您需要提供子级 Prop 和依赖项，因此请习惯 shallowMount and mount differences .

2. 当您开始测试事件时，可能会涉及一些同步，因此您需要等待事件传播并调用组件方法。这通常涉及传递 done回调至it() block 。