Test suite failed to run. RangeError: Maximum call stack size exceeded, when trying to unit test a component.

[ZaeemKhaliq]

I am doing a really simple unit test of a component of my app. In the component, I have imported an icon from quasar (QIcon) as :-

//Cards.vue -> Component name
import { outlinedPlayArrow } from "@quasar/extras/material-icons-outlined";

I am running the test with npm run test:unit

When I ran the test initially, I was getting the following error:-

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:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
     • 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

 SyntaxError: Unexpected token 'export'

      67 | <script>
      68 | import { mapState, mapGetters } from "vuex";
    > 69 | import { outlinedPlayArrow } from "@quasar/extras/material-icons-outlined";
         | ^
      70 |
      71 | export default {
      72 |   name: "Cards",

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.<anonymous> (src/components/Home/Body/Cards.vue:69:1)

I researched a bit and some answer said to include the @quasar folder in node_modules in the 'transformIgnorePatterns' property of jest config in order to not ignore the transformations for quasar extras. So I did this:-

const esModules = ["quasar/lang", "lodash-es", "@quasar", "@quasar/*"].join(
  "|"
);

But now it's giving this error: -

Test suite failed to run

RangeError: Maximum call stack size exceeded

      67 | <script>
      68 | import { mapState, mapGetters } from "vuex";
    > 69 | import { outlinedPlayArrow } from "@quasar/extras/material-icons-outlined";
         | ^
      70 |
      71 | export default {
      72 |   name: "Cards",

      at Runtime._execModule (node_modules/jest-runtime/build/index.js:1299:24)
      at Object.<anonymous> (src/components/Home/Body/Cards.vue:69:1)
      at Object.<anonymous> (test/jest/__tests__/Home/Cards.spec.js:8:1)

Please help me why is this problem occurring?

I am doing this simple test:-

/* eslint-disable no-unused-vars */
/* eslint-disable import/no-extraneous-dependencies */

import { describe, expect, it } from "@jest/globals";
import { installQuasarPlugin } from "@quasar/quasar-app-extension-testing-unit-jest";
import { mount, shallowMount } from "@vue/test-utils";

import Cards from "../../../../src/components/Home/Body/Cards.vue";

installQuasarPlugin();

describe("Cards", () => {
  it("Should render a value", async () => {
    const wrapper = mount(Cards);

    const value = wrapper.find(".value");

    expect(value.text()).toBeTruthy();
  });
});

My jest.config.js file:-

const esModules = ["quasar/lang", "lodash-es", "@quasar", "@quasar/*"].join(
  "|"
);

module.exports = {
  globals: {
    __DEV__: true,
    // TODO: Remove if resolved natively
    // See https://github.com/vuejs/vue-jest/issues/175
    "vue-jest": {
      pug: { doctype: "html" },
    },
  },
  // noStackTrace: true,
  // bail: true,
  // cache: false,
  // verbose: true,
  // watch: true,
  collectCoverage: false,
  coverageDirectory: "<rootDir>/test/jest/coverage",
  collectCoverageFrom: [
    "<rootDir>/src/**/*.vue",
    "<rootDir>/src/**/*.js",
    "<rootDir>/src/**/*.jsx",
  ],
  // Needed in JS codebases too because of feature flags
  coveragePathIgnorePatterns: ["/node_modules/", ".d.ts$"],
  coverageThreshold: {
    global: {
      //  branches: 50,
      //  functions: 50,
      //  lines: 50,
      //  statements: 50
    },
  },
  testMatch: [
    "<rootDir>/test/jest/__tests__/**/*.(spec|test).js",
    "<rootDir>/src/**/*.jest.(spec|test).js",
  ],
  moduleFileExtensions: ["vue", "js", "jsx", "json"],
  moduleNameMapper: {
    "^~/(.*)$": "<rootDir>/$1",
    "^src/(.*)$": "<rootDir>/src/$1",
    "^app/(.*)$": "<rootDir>/$1",
    "^components/(.*)$": "<rootDir>/src/components/$1",
    "^layouts/(.*)$": "<rootDir>/src/layouts/$1",
    "^pages/(.*)$": "<rootDir>/src/pages/$1",
    "^assets/(.*)$": "<rootDir>/src/assets/$1",
    "^boot/(.*)$": "<rootDir>/src/boot/$1",
    ".*css$": "@quasar/quasar-app-extension-testing-unit-jest/stub.css",
  },
  transform: {
    ".*\\.vue$": "vue-jest",
    ".*\\.js$": "babel-jest",
    ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
      "jest-transform-stub",
    // use these if NPM is being flaky, care as hosting could interfere with these
    // '.*\\.vue$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
    // '.*\\.js$': '@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
  },
  transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
  snapshotSerializers: ["jest-serializer-vue"],
};

The babel.config.js file:-

/* eslint-env node */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const fs = require('fs-extra');
let extend = undefined;

/**
 * The .babelrc file has been created to assist Jest for transpiling.
 * You should keep your application's babel rules in this file.
 */

if (fs.existsSync('./.babelrc')) {
  extend = './.babelrc';
}

module.exports = {
  presets: ['@quasar/babel-preset-app'],
  extends: extend,
};

The babel.rc file:-

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs",
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

And my package.json:-

{
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"See package.json => scripts for available tests.\" && exit 0",
    "test:unit:ui": "majestic",
    "test:unit": "jest --updateSnapshot",
    "test:unit:ci": "jest --ci",
    "test:unit:coverage": "jest --coverage",
    "test:unit:watch": "jest --watch",
    "test:unit:watchAll": "jest --watchAll",
    "serve:test:coverage": "quasar serve test/jest/coverage/lcov-report/ --port 8788",
    "concurrently:dev:jest": "concurrently \"quasar dev\" \"jest --watch\""
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "core-js": "^3.6.5",
    "gsap": "^3.8.0",
    "quasar": "^2.0.0",
    "vue": "^3.2.22",
    "vuex": "^4.0.1"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.13.14",
    "@quasar/app": "^3.0.0",
    "@quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.6",
    "eslint": "^7.14.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jest": "^25.2.2",
    "eslint-plugin-vue": "^7.0.0",
    "eslint-webpack-plugin": "^2.4.0",
    "majestic": "^1.7.0",
    "sass-loader": "^12.3.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 12.22.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}