IonicVueRouter: Unexpected token export

[zwacky]

Hey there, I wanted to run my tests with Jest and came across this issue:

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/zwacky/data/jw-app/node_modules/ionicons/icons/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export * from '../dist/ionicons/svg/index.esm.js';
                                                                                            ^^^^^^

SyntaxError: Unexpected token export

      1 | import Vue from 'vue';
      2 | import Router, { RouteConfig } from 'vue-router';
    > 3 | import { IonicVueRouter } from '@modus/ionic-vue';
        | ^

Just wanted to collect the issue for later. Cheers!

[michaeltintiuc]

Yeah, I think it might be related to how ionicons are exported, I'll give it a try on a demo project

[michaeltintiuc]

Have you given this a look? I assume the issue is with the svg ionicons imported by @ionic/core

https://jestjs.io/docs/en/webpack#handling-static-assets

[michaeltintiuc]

Hey @zwacky I've setup this repo with vue CLI: https://github.com/michaeltintiuc/ionic-vue-jest-test

The tests run fine using ionic/vue including the router.

Can you share a test file that fails?

[zwacky]

So you used the vue CLI. I was using the ionic CLI to create the new project and it looks quite different. Will investigate what exactly causes this and then propose it to ionic itself probably.

I don't see this being a problem with ionic-vue itself. Cheers!

[zwacky]

Doesn't look like it's the setup. I expanded the ionic-vue-jest-test repo with two test cases:

• creation of vue router
• creation of ionic vue router

https://github.com/zwacky/ionic-vue-jest-test/tree/router

[michaeltintiuc]

This is an issue with @ionic/core and ionicons as per this issue: https://github.com/ionic-team/ionic/issues/17577

As a temporary solution copy the mocks dir from here: https://github.com/ionic-team/ionic/tree/master/react/__mocks__