代码之家 › 专栏 › 技术社区 › Robert

如何在我向sinon提交表单时测试是否调用了函数?

vue-test-utils bootstrap-vue sinon unit-testing javascript

2

Robert · 技术社区 · 6 年前

简介:

我想测试一下,如果我点击submit按钮,onSubmit函数就会被调用。我认为这是可能的,从我阅读文档时的理解来看:

预期产量:

让测试运行并向我显示通过或失败

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

上下文:

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>

我想测试一下,如果我点击submit按钮,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();
  })

但这并没有连接到例如单击表单中的按钮。

1 回复 | 直到 6 年前

1

Sergeon 6 年前

测试要调用的vue组件的功能的想法是:

使用创建测试组件 vue-test-utils mount shallowMount .
methods 中的参数 options 提供间谍。
在调用监视方法的组件中执行操作,然后断言该方法确实被调用。

我没有 sinon 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 ,和 提交

您的测试可能需要断言如下内容: 什么时候 这个 <b-nav-form> 组件发出 submit 然后这个 提交 间谍被叫来了。

因为涉及子组件。在 vue测试用例 攀登 而不是 . 这很困难,因为您需要提供子级道具和依赖项,所以请习惯于 shallowMount and mount differences .
当您开始测试事件时,可能涉及到一些同步性,因此您需要等待事件传播并调用组件方法。这通常涉及通过 done 回拨到 it()