Unit testing nested components - Child's `emitted` is undefined

[bugsduggan]

Version

1.0.0-beta.20

Reproduction link

https://github.com/bugsduggan/vue-test-utils-bug

Steps to reproduce

Clone the repo and run npm run test:unit. There will be one failing test indicating that the ChildComponent's emitted is undefined.

What is expected?

Having used mount instead of shallowMount, I was hoping to be able to see events that have been emitted by the ChildComponent.

What is actually happening?

ChildComponent's emitted function returns undefined.

---

I appreciate that this could be seen as testing the implementation of vue but I have 2 components that are very tightly coupled in my application and it is important for us to be able to check what events are being triggered by the child component while unit testing the parent.

If someone can help me narrow down the causes of this bug (and if it's not impossible or undesirable to fix), I would be happy to devote some hours into a pull request.

[lmiller1990]

The event does seem to be triggered - however it is not added to the array returned by emitted. I think this is a bug.

A long time ago, before vue-test-utils, I had a similar situation. I ended up doing something like

let eventName: string = ''
let payload: Array = []

function createEventRecorder() {
  return (event: string, ...args: any[]): Vue =>
   {
     eventName = event
     payload = args
     return new Vue();
   };
}

expect(eventName)...
expect(payload)...

And mocking out the $emit entirely. But now we have vue-test-utils, this should be nice and clean.

@eddyerburgh does this seem like a bug? If so, I can help isolate it with you. I made a PR against the emitted function a while ago, so I'm a bit familiar with how it works.

[eddyerburgh]

Yes this is a bug.

I believe the bug is because the child component is extended from Vue before the event logging mixin is added. @lmiller1990 it would be great if you could pick this up.

[lmiller1990]

Ok thanks. Excited to work on this over the weekend. I need this in my app, too.

[lmiller1990]

I thought it was related to the mixin timing too... but maybe not. I created a test using the @Component syntax and extends Vue. See it in this diff. It's passing, oddly enough.

It fails in the reproduction repo, though, as you can see here. So far only using mount, I don't think you can emit an event from a stubbed out component (or doesn't make that much sense to be able to).

Will keep investigating.

[eddyerburgh]

The issue is that the sub component created with Vue.extend doesn't have the logEvents mixin applied. I'll fix this

[lmiller1990]

Ok, great. I'll review the PR, I would like to see how you fix this.