How to do Vue.use(CompositionAPI) in tests?

[MartinMalinda]

Hey, first of all great library it's something that's been much needed 👍 so thanks a bunch

I tried to use it in https://github.com/MartinMalinda/vue-concurrency and I hit a blocker that it breaks my test suite.

I have a quick setup file that is being run before every test:

https://github.com/MartinMalinda/vue-concurrency/blob/master/test-utils/vue-setup.ts

This worked fine before but it doesn't do the trick now when I import from vue-demi. I guess I do .use on wrong Vue. Perhaps there needs to be import { Vue } from 'vue-demi'; solely for testing purposes?

[MartinMalinda]

Huh, there is a Vue exported, so I'm trying:

import Vue from "vue";
import CompositionApi from "@vue/composition-api";
import { Vue as VueDemiVue } from 'vue-demi';

Vue.use(CompositionApi);
VueDemiVue.use(CompositionApi);

But I get:

TypeError: Cannot read property 'use' of undefined

[antfu]

Thanks, I will have a look on that.

And you don't have to install VCA I think. vue-demi should already do that for you.

Meanwhile, If you want to install other plugins, the best way to do might be:

import { createApp } from 'vue-demi'

const app = createApp()
app.use(xxxx)

as Vue.use is no longer there in Vue 3. app.use in Vue 2 is a polyfill by VCA plugin and it's equivalent to Vue.use.

[MartinMalinda]

I'm doing now import Vue from "vue-demi"; in tests

Then I'm creating a wrapper component in which I want to test the utility functions

export function createComponentStub(
  name: string,
  setup = (props, context) => { }
) {
  const stubAttr = `data-test-${name}-stub`;
  return Vue.defineComponent({
    name,
    setup,
    render(el) {
      return el("div", {
        attrs: {
          [stubAttr]: true,
        },
      });
    },
  });
}

When I render this component I pass localVue from vue-demi:

 render(component, {
    localVue: Vue as any
  });

Still it seems that setup() does not get called, which is strange because the imported Vue AFAIK should have the compositionAPI plugin added:

https://github.com/antfu/vue-demi/blob/master/lib/v2/index.esm.js#L5

[MartinMalinda]

But

console.log(Vue['__composition_api_installed__']); seems to print false, so maybe it's not the case

[MartinMalinda]

If I uninstall VCA completely I'm getting:

Test suite failed to run

    Cannot find module '@vue/composition-api' from 'node_modules/vue-demi/
lib/v2/index.cjs.js'

    Require stack:
      node_modules/vue-demi/lib/v2/index.cjs.js
      node_modules/vue-demi/lib/index.cjs.js
      test-utils/vue-setup.ts

[antfu]

Yes. From v0.3.x, @vue/composition-api becomes a peerDependency which you should install it manually.

[antfu]

And I think you should use

import { defineComponent } from "vue-demi"

instead of

import Vue from "vue-demi"

[Devoter]

But

console.log(Vue['__composition_api_installed__']); seems to print false, so maybe it's not the case

Yes, that looks strange:

import VueCompositionApi from '@vue/composition-api';
import { Vue, isVue2, createApp, defineComponent } from 'vue-demi';

import { tracked, calculated } from '.';

if (isVue2) {
  console.log('Vue 2', ((Vue as unknown) as Record<string, unknown>)['__composition_api_installed__']); // Vue 2 undefined ?!
  Vue.use(VueCompositionApi);
  console.log('Vue 2', ((Vue as unknown) as Record<string, unknown>)['__composition_api_installed__']); // Vue 2 true
}

[antfu]

@Devoter What is the bundler you are using? Can you share a reproduce repo? Thanks.

[Devoter]

@antfu Sorry, I cannot share a repo for now. I use bili for building and ts-jest for testing. I'll try to prepare it for you later.

[MartinMalinda]

Minimal repro: https://github.com/MartinMalinda/vue-tiny-emitter

[antfu]

@MartinMalinda Sorry for the delay but I just pull done your repo and it seems to work for me

[Devoter]

@MartinMalinda Sorry for the delay but I just pull done your repo and it seems to work for me

I have to confirm, everything works fine with the lastest version. I don't know why.