Ionic Vue Unit Testing

Ionic Framework
1

So…there’s no documentation for ionic vue testing…which is…bad.

Just want to write a unit test for my very simple component and check if a method is called.

Compoent:

<template>
  <ion-page>
    <button @click="login">Login</button>
  </ion-page>
</template>

<script lang="ts">
import { IonPage } from "@ionic/vue";
import { defineComponent } from "vue";
import authService from './auth.service';

export default defineComponent({
  name: "Login",
  components: { IonPage },
  methods: {
    login() {
      authService.signIn();
    }
  }
});
</script>

My unit test:

import { shallowMount, mount } from '@vue/test-utils';
import Login from './Login.vue';

jest.mock('./auth.service', () => ({
  __esModule: true,
  signIn: Promise.resolve('signed in')
}));

import authService from './auth.service';

describe('Login.vue', () => {
  it('triggers auth service login when login button clicked', () => {
    const wrapper = shallowMount(Login);
    wrapper.find('button').trigger('click')
    expect(authService.signIn).toBeCalled();
  })
})

Running this test results in:

Test suite failed to run

    Jest encountered an unexpected token

    This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.

    By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".

    Here's what you can do:
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/en/configuration.html

    Details:

    /Users/roblouie/projects/test/node_modules/@ionic/vue/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import { addIcons } from 'ionicons';
                                                                                                    ^

    SyntaxError: Unexpected token {

      1 | <template>
    > 2 |   <ion-page>
        | ^
      3 |     <button @click="login">Login</button>
      4 |   </ion-page>
      5 | </template>

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/auth/Login.vue:2:1)

I just have no idea what I’m doing wrong. Is this because it’s typescript? Because it doesn’t know it’s a vue file? Am I doing something else wrong?

The error says it encountered a file that isn’t plain javascript. Which, yes, that is correct, it is not plain javascript, it is a vue file written in typescript, which is the default.

Does anyone have any idea how i can make a working unit test?

3 Likes