小编Evg*_*man的帖子

Vue2:当测试包含功能子组件的组件时,如何从子组件发出事件?

我尝试对包含(bootstrap vue 按钮)的组件进行单元测试b-button

我需要发出一个“click”事件来模拟单击 b-button 子组件,因为我使用shallowMount,所以所有子组件都被模拟,我不能.trigger('click')在它上面。此外,我无法访问该子项的虚拟机,因为 b-button 是一个没有实例的功能组件,因此childWrapper.vm.$emit('click')也无法工作。

使用shallowMount 测试组件的最佳选择是什么?

我尝试过的:

  1. 使用安装而不是shallowMount.trigger('click')就可以完成这项工作
  2. 使用的shallowMount和pass {stubs: {BButton}}b-button将被真实的实现所模拟,并且将像第1节一样工作
  3. 试过了btnWrapper.trigger('click'),,,都没有成功btnWrapper.vm.$emit('click')btnWrapper.element.click()
// TemplateComponent.vue
<template>
  <div class="row">
    <div class="col-12 p-2">
      <b-button @click="eatMe">Eat me</b-button>
    </div>
  </div>
</template>

<script>
  import bButton from 'bootstrap-vue/es/components/button/button';

  export default {
    name: "TemplateComponent",
    components: {
      bButton
    },
    methods: {
      eatMe() {
        this.$emit('click')
      }
    }
  }
</script>
Run Code Online (Sandbox Code Playgroud)
// TemplateComponent.test.js
import {shallowMount} from '@vue/test-utils';

import TemplateComponent from './TemplateComponent.vue';

describe('TemplateComponent', () => …
Run Code Online (Sandbox Code Playgroud)

vue.js jestjs vue-test-utils

3
推荐指数
1
解决办法
1665
查看次数

标签 统计

jestjs ×1

vue-test-utils ×1

vue.js ×1