wrapper.emitted includes sub-component events with the same name

[aethr]

Description

When testing component events, we often trigger an event on an inner sub-component to mimic user input, and observe a final event get emitted from the component under test, sometimes with a different / transformed value. However the current version of vue-test-utils-next makes this difficult by returning all emitted events with the same name, even if they were not emitted directly by the component under test.

This has become more of an issue with the recommendation not to use shallow mount, and the prevalence of update:modelValue events when using v-model heavily (ie in forms).

Expected behaviour

I would expect wrapper.emitted() to only include events emitted by the top-level component provided as the first argument to mount.

Observed behaviour

wrapper.emitted() includes events emitted from sub-components, adding to events observed under the same name.

Example

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

const RawInput = {
  template: '<input v-model="computedValue" />',
  emits: ['update:modelValue'],
  props: ['modelValue'],
  computed: {
    computedValue: {
      get() { return this.modelValue; },
      set(val) { this.$emit('update:modelValue', val); },
    },
  },
};
const CSVInput = {
  template: '<div class="container"><RawInput v-model="computedValue" /></div>',
  components: { RawInput },
  emits: ['update:modelValue'],
  props: ['modelValue'],
  computed: {
    computedValue: {
      get() { return this.modelValue.join(' '); },
      set(val) { this.$emit('update:modelValue', val.split(',')); },
    },
  },
};

test('emitted events', () => {
  const wrapper = mount(CSVInput, { props: { modelValue: [] } });
  // inner component emits 'foo,bar'
  wrapper.get('input').setValue('foo,bar');

  // we want to test outer component emits ['foo', 'bar']
  expect(wrapper.emitted('update:modelValue')).toStrictEqual([[['foo', 'bar']]]);

  // instead wrapper.emitted('update:modelValue') contains events for both
  // inner and outer components
});

Error: expect(received).toStrictEqual(expected) // deep equality

- Expected
+ Received

@@ -1,7 +1,10 @@
  Array [
    Array [
+     "foo,bar",
+   ],
+   Array [
      Array [
        "foo",
        "bar",
      ],
    ],

Version

2.0.0-rc.0

This also appears to be a regression that was not present in earlier versions, as updating to 2.0.0-rc.0 broke about 12 tests in our test suite that were previously working with the expected behaviour.

[afontcu]

Hi! This definitely looks like something that should not happen. Is it possibly due to #296?

[aethr]

Looks like it. The devTools emit method is getting called on every emit, so all events occurring within the wrapper are being recorded.

A simple fix would be to add a key to each vm to record events for each vm separately, not sure if polluting the vm instance is considered bad form. Alternately, events could be recorded against the component uid.

I can take a look at getting a PR up tomorrow if no one else has a chance to look at it.

[aethr]

Had a crack at a PR, updated the tests to detect the issue but I haven't tested this fork against my actual project codebase.