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

如何访问已通过引用访问的组件的“排放”？

1 个答案: