Vue unit test - SyntaxError: Cannot use import statement outside a module

Ionic Framework Ionic Vue
1

I’ve just created a fresh Ionic Vue project using Ionic Start and have opened up the vue UI tool and run the Unit Test task. I get the following error:

SyntaxError: Cannot use import statement outside a module

      23 | 
      24 | <script lang="ts">
    > 25 | import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
         | ^
      26 | import { defineComponent } from 'vue';
      27 | 
      28 | export default defineComponent({

Can anyone point me in the right direction for fixing this - I was hoping the unit test would pass for a fresh new project :slight_smile:

2

Did you remove any dependencies from your package.json file? I am not getting that error when running tests with a blank Ionic Vue app.

That being said, the tests in our starter apps should be updated to reference the latest starter components. (I see that they reference a HelloWorld component that no longer exists).

3

I didn’t remove any dependencies. I just created a new blank Vue project and changed the test file to this:

import { shallowMount } from "@vue/test-utils";
import Home from "@/views/Home.vue";

describe("Home.vue", () => {
  it("renders props.msg when passed", () => {
    const msg = "new message";
    const wrapper = shallowMount(Home, {
      props: { msg },
    });
    expect(wrapper.text()).toMatch(msg);
  });
});

If I then open up the Vue UI tool and run the test I get the error:

Test suite failed to run

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

    SyntaxError: Cannot use import statement outside a module

      23 | 
      24 | <script lang="ts">
    > 25 | import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
         | ^
      26 | import { defineComponent } from 'vue';
      27 | 
      28 | export default defineComponent({

      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/views/Home.vue:25:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total

Ionic Info:

Ionic:

   Ionic CLI       : 6.12.3 (/Users/user/.nvm/versions/node/v12.16.2/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.2

Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

Utility:

   cordova-res (update available: 0.15.2) : 0.12.2
   native-run (update available: 1.3.0)   : 1.0.0

System:

   NodeJS : v12.16.2 (/Users/user/.nvm/versions/node/v12.16.2/bin/node)
   npm    : 6.14.8
   OS     : macOS Catalina
4

Ah I think we forgot to add a transformIgnorePatterns rule to jest.config.js. We need to transpile @ionic/vue since it uses ES6 import/export statements (See: https://cli.vuejs.org/core-plugins/unit-jest.html#transform-dependencies-from-node-modules)

In your jest.config.js file, add:

transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router)']

Also you will likely need to use mount instead of shallowMount otherwise the test utils will just stub components like ion-page. This is true of a Vue 3 application without Ionic Framework as well.

Does making these changes resolve the issue?

2 Likes
5

Thank you - all working now!

1 Like
6

Great! I will update our starters with those changes to the tests for other developers.

1 Like
7

Thanks! This topic saved my day.

1 Like