如何从子组件 Vue.js 发出测试方法 - JavaScript

在Vue.js中，我们可以在父组件中调用子组件中定义的方法，也可以在子组件中发出自己的事件，让父组件监听并响应。在进行单元测试时，我们需要测试这些方法和事件是否能够正确执行和响应。

从父组件调用子组件的方法

我们可以使用Vue的vm.$refs来获取子组件的引用，进而调用子组件中定义的方法：

import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

test('调用子组件的方法', () => {
  const wrapper = mount(MyComponent)
  const child = wrapper.vm.$refs.child
  child.myMethod()
  expect(wrapper.vm.$data.someData).toEqual('new value')
})

在上面的例子中，我们获取了子组件<child>的引用，并调用了其中定义的myMethod()方法。接着，我们判断子组件中的某个数据是否被正确更新。

在子组件中触发事件

我们可以在子组件中定义自己的事件，并通过$emit方法触发该事件。在父组件中使用v-on监听该事件，并响应。

<template>
  <div>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', true)
    }
  }
}
</script>

在上面的代码中，当按钮被点击后，子组件会通过$emit方法触发my-event事件，并传递了一个参数true。在父组件中我们可以这样监听和处理这个事件：

<template>
  <div>
    <child @my-event="handleEvent"></child>
  </div>
</template>

<script>
export default {
  methods: {
    handleEvent(val) {
      this.myData = val
    }
  }
}
</script>

在上面的代码中，我们通过@my-event监听了子组件<child>发出的事件，并在handleEvent方法中对传递进来的参数进行处理，并将结果保存到父组件的数据中。

进行单元测试

在单元测试中，我们需要模拟触发子组件的事件，并检查父组件是否正确响应。我们可以使用Vue的wrapper对象提供的方法来模拟和监听事件：

import { mount } from '@vue/test-utils'
import MyComponent from './MyComponent.vue'

test('触发子组件的事件', () => {
  const wrapper = mount(MyComponent)
  wrapper.find('button').trigger('click')
  expect(wrapper.vm.myData).toBe(true)
})

在上面的例子中，我们先用wrapper.find方法查找到按钮元素，并调用trigger方法模拟按钮的点击事件。最后，我们判断父组件中的myData是否被正确更新。

结论

在Vue.js中，通过在父子组件之间传递方法和事件，我们可以实现组件之间的协作和通信，同时也为单元测试提供了更方便的方式来保证代码的正确性。