How do I unit test a quasar app using Jest?

Integrating Jest with Quasar is quite straight-forward. You'll need two packages, babel-jest and jest.

yarn add jest babel-jest -D

After adding those two dependencies, create a jest.config.js file at the root of your project--here's where all the jest configuration goes.

Here's how the jest.config.js file should look like;

module.exports = {  globals: {    __DEV__: true,  },  verbose: false, // false since we want to see console.logs inside tests  bail: false,  testURL: 'http://localhost/',  testEnvironment: 'jsdom',  testRegex: './__unit__/.*.js$',  rootDir: '.',  testPathIgnorePatterns: [    '<rootDir>/components/coverage/',    '<rootDir>/test/cypress/',    '<rootDir>/test/coverage/',    '<rootDir>/dist/',    '<rootDir>/node_modules/',  ],  moduleFileExtensions: ['js', 'json', 'vue'],  moduleNameMapper: {    '^vue$': 'vue/dist/vue.common.js',    'quasar': 'quasar-framework/dist/umd/quasar.mat.umd.js',  },  resolver: null,  transformIgnorePatterns: [    'node_modules/core-js',    'node_modules/babel-runtime',    'node_modules/vue',  ],  transform: {    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',  }}

Then create a folder inside the root of your project called __unit__

Place a file called MyUnitTest.test.js inside the __unit__ folder. Now Jest picks up files from this folder.

The final touch would be to run the tests, simply add this to the package.json

"unit": "yarn run jest --config jest.config.js"

Boom! -- Now you may run yarn run unit or yarn run unit --watch and it should work.

Here's a sample of a Quasar component and Jest test.

import { createLocalVue, shallowMount } from '@vue/test-utils'import Vuex from 'vuex'import Quasar, * as All from 'quasar'import CookieConsent from '@components/common/CookieConsent.vue'const localVue = createLocalVue()localVue.use(Vuex)localVue.use(Quasar, { components: All, directives: All, plugins: All })describe('CookieConsent.vue', () => {  const wrapper = shallowMount(CookieConsent, {    localVue,    mocks: {      $t: () => {},    },  })  test('CookieConsent.vue mock should exist', () => {    expect(wrapper.exists()).toBe(true)  })})

Hope you found this useful