bug: @ionic/vue Jest testing not working

[nmokkenstorm]

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]

As a followup to this, this seems to be a valid workaround, but I'd rather not resort to a solution that feels this hacky for something as simple as running Jest

[maxarndt]

I'm facing the same issue with "@ionic/vue": "0.0.9". A lot of time has passed since the last update here. Are there any updates on this?

A properly functional testing is essential for all of us I guess.

[nmokkenstorm]

For what it's worth, I never found a solution to this and ended up moving away from Ionic

[maxarndt]

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

[dflasch]

@maxarndt @nmokkenstorm I found a workaround to get Jest running with "@ionic/vue": "0.0.9". There are two things you need to do.

1. Modify your your jest config
   You need to whitelist ionic to be transformed by jest. You can do so by adding the following line to jest.config.js: transformIgnorePatterns: ['node_modules/(?!(ion|@ionic))']

2. If you want to use a localVue Instance like it's recommended in the Vue Testing Handbook , you need to modify the global Vue configuration in each testing file. This would look like:

import { createLocalVue } from '@vue/test-utils';
import Ionic from '@ionic/vue';
import Vue from 'vue';

Vue.config.ignoredElements.push(new RegExp('^ion-'));

const localVue = createLocalVue();
localVue.use(Ionic);

//testcode goes here

I guess there is a bug in @ionic/vue. There will be warnings, if you do not modify the config of the gloabal vue instance. The warnings will be created in vue.runtime.common.dev.js, function createElm(...). Seems like the configuration of the localVue Instance won't be passed to the runtime configuration. Vue.config.ignoredElements.push(new RegExp('^ion-')); will do the trick, but that should not be necessary.

[liamdebeasi]

Thanks for the issue! We recently released an all new Ionic Vue beta that should fix most of the issues reported. Can you try out the latest Ionic Vue beta and let me know if this is still an issue?

Getting Started with the latest Ionic Vue beta

The new Ionic Vue beta is built for Vue 3. Moving forward, we are not going to support Vue 2. For information on how to get started with the latest beta, check out our Ionic Vue Getting Started Guide.

At this time, we do not have a migration path from Ionic Vue built for Vue 2 to Ionic Vue built for Vue 3, but the Ionic Framework differences should be minimal.

Feel free to check out our Ionic Vue Beta Announcement blog post for more details on this release.

Help! The reported issue still happens in the latest Ionic Vue beta.

Please follow up here with the issue reproduced in an Ionic starter application running the latest Ionic Vue beta. Also include any revised steps to reproduce the issue. Issues that do not have a GitHub repo with the issue reproduced in an Ionic starter app will be closed.

My issue is resolved/My issue is no longer relevant.

You can either close the issue yourself, or do nothing. If there is no response within 14 days, this thread will be automatically closed.

I have a new issue.

Please create a new issue. Be sure to reproduce the issue in an Ionic starter application running the latest Ionic Vue beta and include a link to the repo.

Be sure to search for your issue first, as the issue you are running into may have already been reported.

We are excited to get closer to the Ionic Vue release and look forward to welcoming new Vue developers to the Ionic community. Please let me know if there are any questions. Thanks!

[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,

[ionitron-bot]

Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!