I get Cannot use import statement outside a module error while unit testing with Jest in quasar - vue.js

Question

I want to test my quasar application with jest, when i run the test i get error
SyntaxError: Cannot use import statement outside a module
58 | </template>
59 | <script>
> 60 | import { QCalendarDay, today } from '#quasar/quasar-ui-qcalendar/src/index.js'
| ^
61 | import '#quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
62 | import '#quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
63 | import '#quasar/quasar-ui-qcalendar/src/QCalendarDay.sass'
root/src/components/calendars/daily-calendar
div(style="display: flex")
q-calendar-day.rounded-borders(ref="dailyCalendar" :locale="localeLanguage" :hour24-format="true" :interval-minutes="appointmentDuration" v-model="selectedDate" view="day" animated bordered transition-next="slide-left" transition-prev="slide-right" no-active-date :interval-start="24" :interval-count="68" :interval-height="28")
template(#head-day-event="{ scope: { timestamp } }")
div(style="display: flex; justify-content: center; flex-wrap: wrap; padding: 2px")
template(v-for="event in modelValueProxy[timestamp.date]" :key="event.id")
q-badge(v-if="!event.time" :class="badgeClasses(event, 'header')" :style="badgeStyles(event, 'header')" style="width: 100%; cursor: pointer; height: 12px; font-size: 10px; margin: 1px")
.title.q-calendar__ellipsis
| {{ event.title }}
daily calendar script
import { QCalendarDay, today } from '#quasar/quasar-ui-qcalendar/src/index.js'
import '#quasar/quasar-ui-qcalendar/src/QCalendarVariables.sass'
import '#quasar/quasar-ui-qcalendar/src/QCalendarTransitions.sass'
import '#quasar/quasar-ui-qcalendar/src/QCalendarDay.sass'
import lookie from 'lookie'
import moment from 'moment'
import { date } from 'quasar'
import { defineComponent } from 'vue'
export default defineComponent({
name: 'WeekSlotDayBody',
components: {
QCalendarDay
},
root/test/jest/tests/dailyCalendar.spec.ts
import { describe, expect, it } from '#jest/globals'
import { installQuasarPlugin } from '#quasar/quasar-app-extension-testing-unit-jest'
import { mount } from '#vue/test-utils'
import dailyCalendar from '#/components/calendars/daily-calendar.vue'
/*
* You can provide a config object as param like such:
*
* ```ts
* installQuasarPlugin({ plugins: { Dialog } });
* ```
*/
installQuasarPlugin()
describe('dailyCalendar', () => {
it('mounts without errors', () => {
const wrapper = mount(dailyCalendar)
expect(wrapper).toBeTruthy()
})
})
jest.config.js
const esModules = ['quasar', 'quasar/lang', 'lodash-es'].join('|')
/* eslint-env node */
module.exports = {
globals: {
__DEV__: true,
// TODO: Remove if resolved natively
// See https://github.com/vuejs/vue-jest/issues/175
'vue-jest': {
pug: { doctype: 'html' }
},
// Remove if using `const enums`
// See https://huafu.github.io/ts-jest/user/config/isolatedModules#example
'ts-jest': {
isolatedModules: true
}
},
roots: ['<rootDir>/../'],
modulePaths: ['<rootDir>/../'],
moduleDirectories: ['node_modules'],
// Jest assumes we are testing in node environment, specify jsdom environment instead
testEnvironment: 'jsdom',
// noStackTrace: true,
// bail: true,
// cache: false,
// verbose: true,
// watch: true,
collectCoverage: false,
coverageDirectory: '<rootDir>/test/jest/coverage',
coverageReporters: ['json-summary'],
collectCoverageFrom: [
'<rootDir>/src/**/*.vue',
'<rootDir>/src/**/*.js',
'<rootDir>/src/**/*.ts',
'<rootDir>/src/**/*.jsx',
'<rootDir>/src/**/*.tsx'
],
coveragePathIgnorePatterns: ['/node_modules/', '.d.ts$'],
coverageThreshold: {
global: {
// branches: 50,
// functions: 50,
// lines: 50,
// statements: 50
}
},
testMatch: [
// Matches tests in any subfolder of 'src' or into 'test/jest/__tests__'
// Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
'<rootDir>/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
'<rootDir>/src/**/*.jest.(spec|test).+(ts|js)?(x)'
],
// Extension-less imports of components are resolved to .ts files by TS,
// grating correct type-checking in test files.
// Being 'vue' the first moduleFileExtension option, the very same imports
// will be resolved to .vue files by Jest, if both .vue and .ts files are
// in the same folder.
// This guarantee a great dev experience both for testing and type-checking.
// See https://github.com/vuejs/vue-jest/issues/188#issuecomment-620750728
moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
moduleNameMapper: {
'^quasar$': 'quasar/dist/quasar.esm.prod.js',
'^~/(.*)$': '<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: {
// See https://jestjs.io/docs/en/configuration.html#transformignorepatterns-array-string
[`^(${esModules}).+\\.js$`]: 'babel-jest',
'^.+\\.(ts|js|html)$': 'ts-jest',
// vue-jest uses find-babel-file, which searches by this order:
// (async) .babelrc, .babelrc.js, package.json, babel.config.js
// (sync) .babelrc, .babelrc.js, babel.config.js, package.json
// https://github.com/tleunen/find-babel-config/issues/33
'.*\\.vue$': 'vue-jest',
'.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
},
transformIgnorePatterns: [`node_modules/(?!(${esModules}))`],
snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
}
Error
Cannot find module '#/components/calendars/daily-calendar.vue' from 'test/jest/__tests__/MyButton.spec.ts'
package.json
{
"private": true,
"scripts": {
"dev": "quasar dev",
"build": "quasar build",
"start": "node server.js",
"lint": "eslint --ext .js,.ts,.vue ./",
"format": "prettier --write \"**/*.{js,ts,vue,scss,html,md,json}\" --ignore-path .gitignore",
"test": "echo \"See package.json => scripts for available tests.\" && exit 0",
"heroku-postbuild": "yarn && yarn build",
"make-badges": "istanbul-badges-readme",
"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": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/vue-fontawesome": "^3.0.0-5",
"#quasar/cli": "^1.3.2",
"#quasar/extras": "^1.13.6",
"#types/lodash-es": "^4.17.6",
"#vue/test-utils": "^2.0.0-rc.18",
"axios": "^0.27.2",
"connect-history-api-fallback": "^1.6.0",
"core-js": "^3.22.3",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"echarts": "^5.3.2",
"express": "^4.18.1",
"froala-editor": "^4.0.11",
"happy-dom": "^6.0.4",
"include-media": "^1.4.10",
"lodash-es": "^4.17.21",
"lookie": "^1.0.4",
"moment": "^2.29.3",
"moment-business-days": "^1.2.0",
"moment-timezone": "^0.5.34",
"quasar": "^2.7.5",
"reactive-state": "^3.7.2",
"sass": "^1.52.1",
"serve-static": "^1.15.0",
"stream-browserify": "^3.0.0",
"ui": "^0.2.4",
"vitest": "^0.18.1",
"vue": "^3.2.33",
"vue-echarts": "^6.0.2",
"vue-froala-wysiwyg": "^4.0.11",
"vue-i18n": "^9.2.0-beta.36",
"vue-jest": "^5.0.0-alpha.10",
"vue-moment-tz": "^2.1.1",
"vue-router": "^4.0.14",
"yarn": "^1.22.18"
},
"devDependencies": {
"#prettier/plugin-pug": "^2.0.0",
"#quasar/app-webpack": "^3.5.3",
"#quasar/quasar-app-extension-qcalendar": "^4.0.0-beta.15",
"#quasar/quasar-app-extension-testing": "^2.0.4",
"#quasar/quasar-app-extension-testing-unit-jest": "^3.0.0-alpha.10",
"#types/node": "^17.0.29",
"#typescript-eslint/eslint-plugin": "^5.21.0",
"#typescript-eslint/parser": "^5.21.0",
"eslint": "^8.14.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-vue": "^8.7.1",
"eslint-webpack-plugin": "^3.1.1",
"istanbul-badges-readme": "^1.8.2",
"majestic": "^1.7.0",
"prettier": "^2.6.2",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"workbox-webpack-plugin": "^6.5.3"
},
"browser": {
"crypto": false,
"stream": false
},
"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"
},
"overrides": {
"#types/eslint": "8.4.3"
},
"resolutions": {
"#types/eslint": "8.4.3"
}
}
When I run the above gesture conf, I get module not found error. this config is actually the config that comes when loading jest with quasar. I don't understand why I am getting such an error.

Answer 1

Remove nonexistent /calendars folder from your import path:
import dailyCalendar from '#/components/calendars/daily-calendar.vue'
Should be updated to:
import dailyCalendar from '#/components/daily-calendar.vue'
The import is looking for a file path that doesn't exist, given that the actual file is at root/src/components/daily-calendar and #/ is mapped to root/src. If the actual file path was root/src/components/calendars/daily-calendar, the import would work.