Is @vue/test-utils ^2.0.0-rc.16 using the Options API/mixins?

[joerattz]

I'm trying to use mocha and vue test utils to test a Vue3 proof of concept app. Initially I was getting a feature flag warning that said this:

Feature flag __VUE_OPTIONS_API__ is not explicitly defined. You are running the esm-bundler build of Vue, which expects these compile-time feature flags to be globally injected via the bundler config in order to get better tree-shaking in the production bundle.

I'm not sure if this is coming from webpack or what?

So I added this to my webpack config file to explicitly set it to not allow usage of the Options API:

new WebpackPlugin.DefinePlugin({ __VUE_OPTIONS_API__: false, } ),

That makes the Feature flag warning go away, but when I do that, and use the vue test utils mount() method to mount my app, I get these warnings:

[Vue warn]: Mixins are only available in builds supporting Options API [Vue warn]: Property "count" was accessed during render but is not defined on instance. at <AppStart name="Alex" ref="VTU_COMPONENT" > at <VTUROOT>

They go away if I comment out the mount() method call. So, I'm guessing vue test utils is using mixins and the Options API.

We don't want to allow our code to use the Options API so not sure how to handle this? I would expect since this version of vue test utils is specifically for Vue3 that it would use the Composition API?

Any guidance would be appreciated.

[cexbrayat]

Hi Joe, thank you for opening a discussion.

VTU does not use mixins if your code doesn't, so you should not get this warning. I suspect the component you're trying to test is using a mixin?

If you think this is an issue with VTU, you can open an issue with a minimal reproduction and we'll take a look.

[joerattz]

Not sure I'll get around to posting a minimal reproduction app but here is the only component I'm testing with currently. I've pared it down to very little.

<template>
    <div class="app"> 
        Hello !
    </div>
</template>

<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
    });
</script>

Here is a simple test file.

describe("Testing app.vue component...", () => {
    let wrapper, clickButton;
    const props = {
        name: 'Alex'
    };

    beforeEach(() => {
        wrapper = mount(App, {
            props: props,
        }); 

        clickButton = wrapper.find('#click');
    });

    it('A simple test', () => {
        assert.equal(1, 2 - 1);
    });
});

No test is actually using VTU there because I have removed tests using it so that when I comment out the beforeEach() call, everything still works. I'm only using VTU's mount() at this point. Also, FYI, I'm using Mocha/Chai in case that has relevance.

And here is the output containing the Vue warning the above test code produces.

Please notice the Vue warning: [Vue warn]: Mixins are only available in builds supporting Options API

However, if I comment out the beforeEach() call above, the warning is gone.

I feel pretty confident my tested component is not using mixins or the Options API yet I'm getting a warning when calling VTU's mount() function. This makes me think that VTU is using the Options API.

Am I wrong? Any guidance?

Thanks!

[cexbrayat]

I think this is probably more a webpack config issue than a VTU one.
You don't have the warning when you comment mount because then nothing is done.

Try with Vue CLI (it is webpack based and you can pick mocha as a testing option IIRC), and if you still reproduce the issue, then we'll dig deeper. But I think your error may go away with a proper webpack config (you can check out what the Vue CLI uses with vue config).

In any case, VTU should not use Options API/mixins if the tested code does not, and I don't think any other user reported this warning.