scoped NPM package import @mdi in Jest gives: "SyntaxError: Invalid or unexpected token."

Question

I have a perfectly fine working Vue 3 (single-file) component that uses: import "@mdi/font/css/materialdesignicons.css";. However Jest gives an error:

tests/unit/components_sections_tasks.spec.js ● Test suite failed to run

@font-face {
^

SyntaxError: Invalid or unexpected token

  65 | </template>
  66 | <script>
> 67 | import "@mdi/font/css/materialdesignicons.css";
     | ^
  68 | import { defineComponent, ref, watch } from "vue";
  69 | import { useRouter } from "vue-router";
  70 | import { useCurrentTime } from "@/composables/useCurrentTime";

  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/components/sections/tasks.vue:67:1)

Does someone know what is happening, and even better: how to fix it?

Answer 1

As noted in this answer and in this jest issue, you need to have jest ignore parsing for those files.

Update your jest.config.js file with:

moduleNameMapper: {
  ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$":"rootDir>/tests/mock.js",
}

And then create a tests/mock.js file with:

module.exports = {}