Question

例如，我有一个带有以下模板的Parent组件：

<Parent>
  <Child id="foo" @click="doSomething"></Child>
  <Child id="bar" @click="doSomethingElse"></Child>
</Parent>

我需要找到一个具有特定ID的Child组件（例如ID为foo的组件），以便我可以让它触发对父项的click事件。一开始，我尝试过：

describe('Parent component', () => {
  it('will do something when Child component with id "foo" triggers "click" event.', () => {
    var wrapper = shallowMount(Parent, {
      /* some other options that doesn't matter here. */
    );
    wrapper.find('#foo').vm.$emit('click');
  });
});

这是错误的，因为通过选择器找到时，由find方法返回的包装器没有vm方法，而且我不知道下一步该怎么做。

任何有用的帮助将不胜感激。

P.S我不想在这些组件中添加额外的ref，因为这会在实现代码中添加额外的代码。

Answer 1

import Child from '../src/componentsChild.vue'

const children =wrapper.findAll(Child).vm.$emit('click');
const fooChild = children.wrappers.find(wrapper => wrapper.vm.$el.id === 'foo')
foo.vm.$emit('click')

您可能也可以使用对在根元素上另存为__vue__的组件实例的引用，但这会很麻烦：

wrapper.find('#foo').element.__vue__.$emit('click');

Answer 2

您可以使用const child = document.querySelector('PARENT > #foo');

选择孩子

如何通过其ID查找组件？

2 个答案: