2

介绍：

我想测试一下，如果我点击提交按钮，就会调用 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。我知道我必须设置一个监听被调用函数的间谍。

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

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

但这与例如单击表单中的按钮无关。

请指教

4

1 回答 1

2

测试已调用的 vue 组件功能的想法是：

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

  2. 在 中传递一个methods参数options以提供间谍。

  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时，onSubmitspy 会被调用。这不是什么了不起的事情。

您的测试可能需要断言如下内容：当<b-nav-form>组件发出submit事件时，就会调用spyonSubmit。

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

  1. 因为涉及到子组件。要在测试中真正呈现子组件vue-test-utils，您需要使用mount而不是shallowMount. 这很困难，因为您需要提供 child 的 props 和依赖项，所以要习惯shallowMount 和 mount 的差异。

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

于 2018-08-11T12:43:39.963 回答