如何访问通过ref访问的组件的'emitted'？

Question

我正在使用

vue2-daterange-picker

其中有一个名为 "update" 的自定义事件，我想对其进行测试。

<date-range-picker
  @update="updateValues"
  ref="datePicker"
  .
  .
 >     
 </date-range-picker>

我如何测试更新自定义事件在即将到来的代码中。我正在通过测试文件中的引用访问 DateRangePicker。

it('Test update custom event', () => {
  let datePicker = cmp.vm.$refs.datePicker;
  let startDate = new Date(2019, 5, 12);
  let endDate = new Date(2019, 7, 12);
  let dpValue = { startDate, endDate };
  datePicker.$emit('update', dpValue);
  expect(datePicker._self.__emitted).toHaveProperty('update');
  expect(datePicker._self.__emitted.update[0][0]).toEqual(dpValue);
 });

我访问 emit 属性的方式非常丑陋。它有效，但它很丑。当我通过 ref 访问组件时，我如何访问 emitted，它看起来像在 vue-test-utils 示例中。类似的东西：

const wrapper = mount(Component)
wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)
expect(wrapper.emitted().foo).toBeTruthy()

这样我就可以用更漂亮的方式得到类似的东西。我在这里试过像这样的例子，但它不起作用。

datePicker.$el.emitted().update

请帮忙。

Answer 1

我想通了。

   datePicker = cmp.find({ ref: 'datePicker' });
   datePicker.vm.$emit('update', new Date());
   expect(datePicker.emitted().update).toBeTruthy();

如何访问通过ref访问的组件的'emitted'？

How to acess 'emitted' of component which has been accessed through ref?

vue.js

vue-component

vuejs2

vue-test-utils