JestJS failing to compile vue components when using iconify icons

[robotichead]

Git Source replicating the issue - https://github.com/robotichead/unworking-vue-jest

Stream of issue - https://www.twitch.tv/videos/952503490

Description of issue

When including the line import homeIcon from '@iconify-icons/mdi-light/home'; in the VueJS component, I will receive the error

    Details:

    /Users/luke/Sites/unworking-vue-jest/node_modules/@iconify-icons/mdi-light/home.js:6
    export default data;
    ^^^^^^

    SyntaxError: Unexpected token 'export'

       8 | // Import component
       9 | import IconifyIcon from '@iconify/vue';
    > 10 | import homeIcon from '@iconify-icons/mdi-light/home';
         | ^
      11 |
      12 | export default {
      13 |     name: "TestTest",

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at js/TestTest.vue:10:1
      at Object.<anonymous> (js/TestTest.vue:38:3)

Package.json file

The package.json file contains all my configuration, and has essentially been copied and pasted code from the documents.

{
  "name": "vue-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@iconify-icons/mdi-light": "^1.1.0",
    "@iconify/vue": "^1.0.6",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "^7.0.0-bridge.0",
    "babel-jest": "^26.6.3",
    "install": "^0.13.0",
    "jest": "^26.6.3",
    "npm": "^7.6.3",
    "vue-jest": "^3.0.7"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      ".*\\.(js)$": "babel-jest"
    }
  },
  "babel": {
    "presets": [
      "@babel/preset-env"
    ]
  },
  "dependencies": {
    "vue": "^2.6.12"
  }
}

Vue Component

<template>
    <div>
        <h1>Hello World</h1>
    </div>
</template>

<script>
// Import component
import IconifyIcon from '@iconify/vue';
import homeIcon from '@iconify-icons/mdi-light/home';
export default {
    name: "TestTest",
    props: {},
    components: {
        IconifyIcon,
    },
    data() {
       return {
           // Returns icons data that can be used in template
           icons: {
               // Assign homeIcon to icons.home
               //home: homeIcon,
           },
       };
   },
}
</script>

Method

1. Clone the library: git clone git@github.com:robotichead/unworking-vue-jest.git
2. Cd into the directory: cd ./unworking-vue-jest
3. Run npm install: npm install
4. Run the tests: npm run test

[robotichead]

There is currently a work around. We will need to use the jest.mock feature to mock out each icon that we use with a blank return.

jest.mock('@iconify-icons/mdi-light/home.js', () => jest.fn());

[lmiller1990]

babel-jest is not applied to node_modules by default, and Jest does not read ES modules out of the box. This is actually a jest issue, not really test utils. see here.

You could configure Jest to apply es modules transforms to @iconify-icons. Alternatively, @iconify-icons might want to consider shipping a commonjs module (unlikely this happens, though). So you probably want to just tell jest not to ignore that node_module.

Here is a similar issue with a worked example: https://github.com/vuejs/vue-test-utils-next/issues/280#issuecomment-750176994

See this file for an example config: https://github.com/HomyeeKing/learn-test/pull/1/files#diff-1e058ca1442e46581b13571fb8d261f9e1f5657e26c96634d4c1072f0f0347f1 (you will need to tweak it for your use-case).

I am sure this is not a problem in vue-jest, but a general jest config issue. If you'd like to add a note in the README, that'd be great!

[robotichead]

Thank you for your reply. I will close this ticket as we both think this is actually a Jest config issue.