Skip to content

bug: @ionic/vue Jest testing not working #18586

Closed
@nmokkenstorm

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs: replythe issue needs a response from the userpackage: vue@ionic/vue package

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions