[Solved] Configuring Jest with Quasar

[Jaxon]

Hey, vue-test-utils got released and since then I’ve decided to integrate it into my project. I chose the path of Testing SFCs with Jest and followed the guide to integrate it.

Testing SFC’s now works! So long as the component does not import anything from 'quasar'.

Initially, I ran into the issue of:
Cannot find module 'quasar' from 'Hello-Two.vue'

As per research and asking around, was advised to add an alias to my Jest configuration, which looks like this:

"jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "moduleNameMapper": {
      "^@/(.*)$": "<rootDir>/src/$1",
      "^quasar$": "<rootDir>/node_modules/quasar-framework"
    },
    "transform": {
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "mapCoverage": true,
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue"
    ]
  }

Unfortunately, the issue has now mutated to:
SyntaxError: Unexpected token export in the quasar.esm.js file

This has been reported multiple times by other users here, here and some mention of it; in the Quasar Gitter chat but unfortunately, there is no definitive answer on how to resolve it and hoping to compile it all here.
Although this post potentially hints at a fix but am unclear how to proceed. As importing from quasar-framework leads to the same outcome.

I’ve created a git repo to recreate the problem using the Quasar PWA template.
Clone it if you wish and run the quasar test command to begin the testing process.

• Hello.vue -> Hello.spec.js passes as it do not import any quasar components.

• Hello-Two.vue -> Hello-Two.spec.js fails, due to SyntaxError: Unexpected token export as mentioned above. This component also import’s a quasar component.

Researching this issue in general, it seems to lay with the way babel transpiles such that Jest can understand Quasar. As a result, it is now out of my depth and was hoping someone could provide some insight into how to resolve this?

Thanks!

[Jaxon]

Thank you @leon who provided the answer. The following configuration allows the integration of Jest with Quasar.
Checkout the original answer in this post!

"jest": {
    "moduleFileExtensions": [
      "js",
      "vue"
    ],
    "collectCoverageFrom": [
      "**/*.{vue}"
    ],
    "transformIgnorePatterns": [
      "node_modules/core-js",
      "node_modules/babel-runtime",
      "node_modules/lodash",
      "node_modules/vue"
    ],
    "moduleNameMapper": {
      "quasar": "quasar-framework/dist/quasar.esm.js",
      "^vue$": "vue/dist/vue.common.js"
    },
    "coverageDirectory": "<rootDir>/src/components/coverage",
    "transform": {
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue"
    },
    "mapCoverage": true
  }

[trajano]

@Jaxon do you have your .babelrc handy?

[MusicForMellons]

Instead of the moduleNameMapper in package.json I added this to .babelrc (as recommended here in the comments by the man behind vue-test-utils):

"env": {
    "test": {
      "presets": [
        "env",
        "stage-2"
      ],
      "plugins": [
        [
          "module-resolver",
          {
            "root": [
              "./src"
            ],
            "alias": {
              "^@/(.*)$": "<rootDir>/src/components/$1",
              "quasar": "quasar-framework/dist/quasar.esm.js",
              "^vue$": "vue/dist/vue.common.js",
              "src": "<rootDir>/src",
              "assets": "<rootDir>/src/assets",
              "components": "<rootDir>/src/components"
            }
          }
        ]
      ]
    }
  }

You do need to install babel-plugin-module-resolver  for this.

[paul]

Any suggestions for V17 when using vue-cli with quasar as plugin?

[s.molinari]

@paul - have a look at this: https://github.com/nothingismagick/quasar-starter-ssr-pwa-jest-cypress

Scott

[paul]

@s-molinari thanks a lot Scott. Very much appreciated.