Description
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