bug: @ionic/vue Jest testing not working

Bug Report

Ionic version: @ionic/vue": “^0.0.4”

Current behavior: When installing the @ionic/vue package in a clean vue-cli project, the plugin doesn’t work in Jest. When replacing the content from the default test with the sample code from the Beta announcement, by default it complains with a message Unexpected token export, after modifying the Jest config entry transformIgnorePatterns to exclude ionicons, an error is raised about Ionicons.addIcons not being a function.

I originally ran into this issue when using Jest in a Nuxt.js project, and reproduced it in a clean Vue project to make sure it wasn’t Nuxt related. I am by no means a Vue expert, but it seems people have had a similar issue in with the Angular version here.

Expected behavior: I’d like to be able to run unit tests in projects using the @ionic/vue package, but right now I can’t.

Steps to reproduce: Create a new project with vue-cli, replace the content from the default HelloWorld component with any Ionic component, register the Ionic plugin in the test, and run it, see the example below.

Related code:

import { shallowMount } from "@vue/test-utils";
import Vue from "vue";
import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';
import HelloWorld from "@/components/HelloWorld.vue";

describe("HelloWorld.vue", () => {
    it("renders props.msg when passed", () => {

        Vue.use(Ionic);

        const msg = "new message";
        const wrapper = shallowMount(HelloWorld, {
            propsData: { msg }
        });

        expect(wrapper.text()).toMatch(msg);
    });
});

➜  ionic-vue git:(master) ✗ yarn test:unit
yarn run v1.16.0
$ vue-cli-service test:unit
 FAIL  tests/unit/example.spec.js (13.148s)
  HelloWorld.vue
    ✕ renders props.msg when passed (372ms)

  ● HelloWorld.vue › renders props.msg when passed

    TypeError: ionicons.addIcons is not a function

       7 |     it("renders props.msg when passed", () => {
       8 |
    >  9 |         Vue.use(Ionic);
         |             ^
      10 |
      11 |         const msg = "new message";
      12 |         const wrapper = shallowMount(HelloWorld, {

      at appInitialize (node_modules/@ionic/vue/dist/ionic-vue.common.js:479:12)
      at Object.install (node_modules/@ionic/vue/dist/ionic-vue.common.js:885:3)
      at Function.Vue.use (node_modules/vue/dist/vue.runtime.common.dev.js:5081:22)
      at Object.use (tests/unit/example.spec.js:9:13)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        13.578s

[nmokkenstorm]

Can you try out the latest Ionic Vue beta and let me know if this is still an issue?

I’ll try to have a look soon, as mentioned the original project I worked on that triggered me to create this issue ended up moving away from Ionic for several reasons, this being one of them, so I’d have to set up a fresh project and reproduce an issue I’m not intimately familiar with anymore,

[maxarndt]

Thank’s for your quick reply @nmokkenstorm! Then our project will probably take place without Ionic as well.