Ionic Vue Unit Testing

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.


    <button @click="login">Login</button>

<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() {

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);

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:


    ({"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?