Bug: Options/data from mixins not available when using class components SFC

[Evertvdw]

Is there currently support for using vue-test-utils together with vue-class-components? I am currently trying to get that to work and it works in part but when using mixins it does not. I have a hard time figuring out where to report this.

[lmiller1990]

I think so, we have some simple tests here.

What problem are you having? Can you try reproduce the problem in this code-base, perhaps?

[Evertvdw]

I forked this repo and added to the classComponent spec file here: https://github.com/Evertvdw/vue-test-utils-next/blob/class-component-mixin/tests/features/classComponent.spec.ts

When you run the test you will see a warning that message is used in the component but not defined. Also the created() hook is not called which is defined in the ClassMixin.vue.

[lmiller1990]

I see - passing props seems not to work. We should fix this. I wonder if the problem is in vue-jest. Looks like it's time to do a bit of a deep dive and figure out what's going on.

Are you interested in debugging this? If so, the next step would be a test without an SFC, but instead using a render function. That would help narrow it down (eg, maybe the bug only happens for SFCs - that could mean a bug in vue-jest, which is how we compile SFCs to work with Jest).

[Evertvdw]

@lmiller1990 I tried to debug it but I get stuck pretty quickly. Using a mixin with a render function works fine, so the issues seems to be with a SFC. I tried update to latest jest/ts-jest v26, just to be sure but that did not help either.

I pushed changes to my forked repo, if you want to check it out: https://github.com/Evertvdw/vue-test-utils-next/blob/class-component-mixin/tests/features/classComponent.spec.ts

I also tried using mixins like this:

@Options({
  mixins: [ClassMixin]
})

Which cause the created() hook to be called from the classMixin atleast (with extends mixin() this is not the case), but it still does not work correctly.

Next step would be to deepdive in the vue-jest package I think? But that is a bit too complex for me to be honest :)

[Evertvdw]

@lmiller1990 I dug into it a bit deeper and my guess is that it is a vue-jest issue, I don't know how to fix it though. I found this line in the code there which probably is the cause for the errors (this is the only mention of vue-class-components I could find in vue-jest):

if (
    tempOutput.match(/\}\(.*.?Vue\);/) &&
    tempOutput.includes('vue-class-component')
  ) {
    node.add(`
      ;exports.default = {
      ...exports.default.__vccBase,
      ...exports.default.__vccOpts
    };`)
  }

@Stijn98s You added the if statement, can you tell what the idea is behind this?
I tried changing/adding some console.log statements in here but I could not get it to work properly. There might be some caching involved from babel too, I'm not familiar enough with the project to fix this I guess.

I also added another test to my forked repo which fails, which is a SFC which extends from Vue but not Vue imported from vue-class-component but Vue imported from vue-property-decorator. Vue property decorator just imports Vue from vue-class-component and exports it again, so both should work and do work when you are running Vue. However, with testing, the one from vue-property-decorator fails: https://github.com/Evertvdw/vue-test-utils-next/blob/class-component-mixin/tests/features/classComponent.spec.ts#L127

@lmiller1990 Any chance you can dig into this?

[Stijn98s]

I added the if statement so the vue-class-component plugin works. The if statement looks if the vue component is a vue class component. If this is the case, It exports the correct variables in the object. Without this the options like props don't workwhen using vue class components.

@lmiller1990 did a video on this when he was debugging https://www.youtube.com/watch?v=okQh9O61S-0

[Evertvdw]

@Stijn98s As I have shown above, vue-class-component only works if you don't extend your component of a mixin and if you don't import Vue from vue-property-decorator so something with this logic is off. What does the first line of the if-statement with the regex check for? The video is useful, I will watch it and try some similar debugging myself :) Seems to be very closely related atleast thanks!

[Evertvdw]

I found the issue and created a PR for the fix in vue-jest.

[lmiller1990]

I reviewed and merge the PR in vue-jest. Nice job figuring this out, vue-jest is quite confusing. The whole process of patching together a bunch of strings to make valid JS code feels very wonky, but that's how Jest transformers work 🤷

I can release a new version of vue-jest in the next few days! Please wait a little.

[Evertvdw]

Thanks! My thoughts exactly on the string patching 😅