Configuration whit Jest
-
Someone using Jest for testing whit quasar?
Can show it working whit quasar template from cli ?Tks a lot !
-
export { QAjaxBar, QAlert, QAutocomplete, QBtn, QCard, QCardTitle, QCardMain, QCardActions, QCardMedia, QCardSeparator, QCarousel, QChatMessage, QCheckbox, QChip, QChipsInput, QCollapsible, QContextMenu, QDataTable, QDatetime, QDatetimeRange, QInlineDatetime, QFab, QFabAction, QField, QGallery, QGalleryCarousel, QIcon, QInfiniteScroll, QInnerLoading, QInput, QInputFrame, QKnob, QLayout, QFixedPosition, QSideLink, QItem, QItemSeparator, QItemMain, QItemSide, QItemTile, QItemWrapper, QList, QListHeader, QModal, QModalLayout, QResizeObservable, QScrollObservable, QWindowResizeObservable, QOptionGroup, QPagination, QParallax, QPopover, QProgress, QPullToRefresh, QRadio, QRange, QRating, QScrollArea, QSearch, QSelect, QDialogSelect, QSlideTransition, QSlider, QSpinner, audio as QSpinnerAudio, ball as QSpinnerBall, bars as QSpinnerBars, circles as QSpinnerCircles, comment as QSpinnerComment, cube as QSpinnerCube, dots SyntaxError: Unexpected token export at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17) at src/components/logo.vue:8:24 at Object.<anonymous> (src/components/logo.vue:31:3)
before include
import { QBtn } from 'quasar-framework'
tests works
-
This post is deleted! -
Check this:
https://github.com/paulvanbladel/quasar-jest
In my opinion, it would make sense that jest is integrated in the base template of Quasar. -
Tks @paul, i saw ur tests but, they working whitout any import of quasar.
The problem is when import anything from quasar-framework.
From the error i undertand : babel is transpiling my tests ( so i can es6 free in spesc.*) but not transpiling node_modulesi’m using this config of jest
"jest": { "verbose": false, "roots": [ "<rootDir>/src" ], "moduleFileExtensions": [ "js", "vue" ], "moduleDirectories": [ "node_modules" ], "moduleNameMapper": { "src/components/([^\\.]*)$": "<rootDir>/src/components/$1.vue", "^vue$": "vue/dist/vue.common.js", "src/([^\\.]*)$": "<rootDir>/src/$1.vue", "(.*)/(.*)$": "$1/$2.vue" }, "transform": { ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor", ".*\\.(vue|js)$": "<rootDir>/node_modules/babel-jest" }, "transformIgnorePatterns": [ "node_modules/(?!vue-router)" ] }
-
Reading jest config, transform make the transpilations.
But its not happing for node_modules imported depedencys -
Btw, i aggre. If we get a mature config of Jest, it enter in quasar base template.
-
Yea. Importing the quasar.esm.js out of node_modules works perfect.
Solving how to transpile node_modules and will post quasar + jest full conf. -
-
@zyegfryed so I ran into the same thing had to add an alias into jest such that it looks like this:
"jest": { "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1", "^quasar$": "<rootDir>/node_modules/quasar-framework" }, }
Unfortunately, now I run into the same thing @leon did.
SyntaxError: Unexpected token export
However, attempting the method of:
import { QBtn } from 'quasar-framework'
did not work for me and am still getting the same export error. -
Hi !
My config now https://github.com/odranoelBR/vue-quasar-admin-example/blob/feature/Feature-migration-v.14/package.json
I’m working whit VScode and whit https://github.com/orta/vscode-jest the tests run when i save files, very awesome.
Hope it helps -
@jaxon I am having the same problem. I am new to the framework but I am thinking if we can have a file that does not use the es6 constructs and do the moduleNameWrapper for it it should work. However, the
quasar.esm.js
file which is the closest thing there at the moment uses es6 constructs just at the end namely theexport
If that portion was translated via babel to the following, it will allow you to move further in your testing.
exports.QAjaxBar = QAjaxBar; exports.QAlert = QAlert; exports.QAutocomplete = QAutocomplete; exports.QBtn = QBtn; exports.QCard = QCard; exports.QCardTitle = QCardTitle; exports.QCardMain = QCardMain; exports.QCardActions = QCardActions; exports.QCardMedia = QCardMedia; exports.QCardSeparator = QCardSeparator; exports.QCarousel = QCarousel; exports.QChatMessage = QChatMessage; exports.QCheckbox = QCheckbox; exports.QChip = QChip; exports.QChipsInput = QChipsInput; exports.QCollapsible = QCollapsible; exports.QContextMenu = QContextMenu; exports.QDataTable = QDataTable; exports.QDatetime = QDatetime; exports.QDatetimeRange = QDatetimeRange; exports.QInlineDatetime = QInlineDatetime; exports.QFab = QFab; exports.QFabAction = QFabAction; exports.QField = QField; exports.QFieldReset = QFieldReset; exports.QGallery = QGallery; exports.QGalleryCarousel = QGalleryCarousel; exports.QIcon = QIcon; exports.QInfiniteScroll = QInfiniteScroll; exports.QInnerLoading = QInnerLoading; exports.QInput = QInput; exports.QInputFrame = QInputFrame; exports.QKnob = QKnob; exports.QLayout = QLayout; exports.QFixedPosition = QFixedPosition; exports.QSideLink = QSideLink; exports.QItem = QItem; exports.QItemSeparator = QItemSeparator; exports.QItemMain = QItemMain; exports.QItemSide = QItemSide; exports.QItemTile = QItemTile; exports.QItemWrapper = QItemWrapper; exports.QList = QList; exports.QListHeader = QListHeader; exports.QModal = QModal; exports.QModalLayout = QModalLayout; exports.QResizeObservable = QResizeObservable; exports.QScrollObservable = QScrollObservable; exports.QWindowResizeObservable = QWindowResizeObservable; exports.QOptionGroup = QOptionGroup; exports.QPagination = QPagination; exports.QParallax = QParallax; exports.QPopover = QPopover; exports.QProgress = QProgress; exports.QPullToRefresh = QPullToRefresh; exports.QRadio = QRadio; exports.QRange = QRange; exports.QRating = QRating; exports.QScrollArea = QScrollArea; exports.QSearch = QSearch; exports.QSelect = QSelect; exports.QDialogSelect = QDialogSelect; exports.QSlideTransition = QSlideTransition; exports.QSlider = QSlider; exports.QSpinner = QSpinner; exports.QSpinnerAudio = audio; exports.QSpinnerBall = ball; exports.QSpinnerBars = bars; exports.QSpinnerCircles = circles; exports.QSpinnerComment = comment; exports.QSpinnerCube = cube; exports.QSpinnerDots = dots; exports.QSpinnerFacebook = facebook; exports.QSpinnerGears = gears; exports.QSpinnerGrid = grid; exports.QSpinnerHearts = hearts; exports.QSpinnerHourglass = hourglass; exports.QSpinnerInfinity = infinity; exports.QSpinnerIos = QSpinnerIos; exports.QSpinnerMat = QSpinnerMat; exports.QSpinnerOval = oval; exports.QSpinnerPie = pie; exports.QSpinnerPuff = puff; exports.QSpinnerRadio = radio; exports.QSpinnerRings = rings; exports.QSpinnerTail = tail; exports.QStep = QStep; exports.QStepper = QStepper; exports.QStepperNavigation = QStepperNavigation; exports.QRouteTab = QRouteTab; exports.QTab = QTab; exports.QTabPane = QTabPane; exports.QTabs = QTabs; exports.QToggle = QToggle; exports.QToolbar = QToolbar; exports.QToolbarTitle = QToolbarTitle; exports.QTooltip = QTooltip; exports.QTransition = QTransition; exports.QTree = QTree; exports.QUploader = QUploader; exports.QVideo = QVideo; exports.BackToTop = backToTop; exports.GoBack = goBack; exports.Move = move; exports.Ripple = Ripple; exports.ScrollFire = scrollFire; exports.Scroll = scroll$1; exports.TouchHold = touchHold; exports.TouchPan = TouchPan; exports.TouchSwipe = TouchSwipe; exports.AddressbarColor = addressbarColor; exports.Alert = Alert; exports.AppFullscreen = appFullscreen; exports.AppVisibility = appVisibility$1; exports.Cookies = cookies; exports.Events = Events; exports.Platform = Platform; exports.LocalStorage = LocalStorage; exports.SessionStorage = SessionStorage; exports.ActionSheet = index; exports.Dialog = Dialog; exports.Loading = index$1; exports.Toast = index$2; exports.animate = animate; exports.clone = clone; exports.colors = colors; exports.date = date; exports.debounce = debounce; exports.frameDebounce = frameDebounce; exports.dom = dom; exports.easing = easing; exports.event = event; exports.extend = extend; exports.filter = filter; exports.format = format; exports.noop = noop; exports.openURL = openUrl; exports.scroll = scroll; exports.throttle = throttle; exports.uid = uid; exports.default = index_esm;
-
@leon I’m getting
TypeError: Cannot read property 'theme' of undefined
would you happen to know where to set that? The test does pass though. -
Hi @trajano
This variable are set in quasar webpack configs. On tests i didint get it, but even whitout him, quasar works, some problems that work is ( no iconsets, no css based on theme etc)
Can you post the component / test ? -
Hi @trajano , hi all,
I ran into
TypeError: Cannot read property 'theme' of undefined
as well. My error stack was pointing a problem withquasar.esm.js
, where I found outctx.parent.$q.theme
couldn’t be resolved. Possible explanation : this may be related to the fact that my tested component is rendered without its parent component, soctx.parent
doesn’t exist.Anyway, fortunately I’m using vue-test-utils, which provides “mocks” mounting option, where I set
$q: { theme : "mat"}
. This works for me, I hope it will help some people here too.I totally agree that it would be more than welcome to have jest pre-configrued in the boilerplate, @rstoenescu.
By the way, thank you so much for what you’re doing, it’s impressive and a pleasure to work with. I’m building a public website right now, it’s in french, but when it’s translated to english, I’ll give you the link to add to the “made with Quasar” list, if you like
-
Hi all,
I finally gave up unit testing my Quasar app, too complicated to set up
I chose rather to e2e-test it. Pros and cons for each test type, but I’m using TestCafe, and it took me a few minutes to install, and a few more to run my first test.There is even a plugin called testcafe-vue-selectors which allows asserting props, data and computed properties. Furthermore, mocking HTTP calls is on TestCafe roadmap (nock is a workaround in the meantime). Both of these points allow some of what unit tests have to offer.
My point is : I’m not convinced it’s worth putting so much effort in unit testing Quasar apps, overall, considering how easy and what can be achieved with e2e testing, TestCafe in particular.
-
What worked for me was adding
"transformIgnorePatterns": [ "node_modules/core-js", "node_modules/babel-runtime", "node_modules/lodash", "node_modules/vue" ],
to my jest config
Full config:
{ "moduleFileExtensions": [ "js", "vue" ], "collectCoverageFrom": [ "**/*.{vue}" ], "transformIgnorePatterns": [ "node_modules/core-js", "node_modules/babel-runtime", "node_modules/lodash", "node_modules/vue" ], "moduleNameMapper": { "quasar": "<rootDir>/node_modules/quasar-framework", "^src/(.*)$": "<rootDir>/src/$1", "^assets/(.*)$": "<rootDir>/src/assets/$1", "^@/(.*)$": "<rootDir>/src/components/$1", "^variables/(.*)$": "<rootDir>/src/themes/quasar.variables.sty/$1" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" }, "mapCoverage": true }
.babelrc
{ "presets": [["es2015", {"modules": false}], "stage-2"], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "plugins": [ "transform-es2015-modules-commonjs" ] } } }
installed extra packages:
- babel-jest
- babel-preset-env
- jest
- vue-jest
-
Here was mine that worked.
.babelrc
{ "presets": [ [ "@babel/preset-env", { "modules": false, "loose": false, "useBuiltIns": "usage" } ], [ "@babel/preset-stage-2", { "modules": false, "loose": false, "useBuiltIns": true, "decoratorsLegacy": true } ] ], "plugins": [ [ "@babel/plugin-transform-runtime", { "polyfill": false, "regenerator": false } ] ], "comments": false, "env": { "test": { "presets": [ ["@babel/env", { "targets": { "node": "current" }}] ], "plugins": [ [ "module-resolver", { "root": [ "./src" ], "alias": { "quasar": "quasar-framework/dist/quasar.mat.esm.js", "^vue$": "vue/dist/vue.common.js" } } ] ] } } }
packages.json
"jest": { "moduleFileExtensions": [ "js", "vue" ], "collectCoverageFrom": [ "**/*.{vue}" ], "transformIgnorePatterns": [ "node_modules/core-js", "node_modules/babel-runtime", "node_modules/lodash", "node_modules/vue" ], "moduleNameMapper": { "quasar": "<rootDir>/node_modules/quasar-framework", "^src/(.*)$": "<rootDir>/src/$1", "^assets/(.*)$": "<rootDir>/src/assets/$1", "^@/(.*)$": "<rootDir>/src/components/$1", "^variables/(.*)$": "<rootDir>/src/themes/quasar.variables.sty/$1" }, "transform": { "^.+\\.js$": "<rootDir>/node_modules/babel-jest", ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" } }, "dependencies": { "@babel/runtime": "^7.0.0-beta.49", "axios": "^0.18.0", "cordova": "^8.0.0", "cordova-cli": "^1.0.0", "mediaelement": "^4.2.9", "moment": "^2.22.2", "quasar": "0.0.18", "vue": "^2.5.16", "vue-i18n": "^7.3.3", "vue-rollbar": "^0.2.2", "vue-timers": "^1.7.3", "vue-video-player": "^5.0.2", "vue-worker": "^1.2.1", "vuetify": "^1.0.19", "vuex": "^3.0.1" }, "devDependencies": { "@babel/core": "^7.0.0-beta.49", "@babel/plugin-transform-runtime": "^7.0.0-beta.49", "babel-core": "^7.0.0-beta.3", "babel-eslint": "^8.2.1", "babel-jest": "^23.0.1", "babel-plugin-module-resolver": "^3.1.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.7.0", "babel-runtime": "^6.26.0", "devtron": "^1.4.0", "electron": "^2.0.0", "electron-debug": "^1.5.0", "electron-devtools-installer": "^2.2.4", "electron-packager": "^12.1.0", "eslint": "^4.18.2", "eslint-config-standard": "^11.0.0", "eslint-friendly-formatter": "^4.0.1", "eslint-loader": "^2.0.0", "eslint-plugin-import": "^2.9.0", "eslint-plugin-node": "^6.0.1", "eslint-plugin-promise": "^3.7.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.3.0", "jest": "^23.1.0", "jest-vue-preprocessor": "^1.4.0", "jsdom": "^11.11.0", "quasar-cli": "^0.16.0", "vue-jest": "^2.6.0", "vue-server-renderer": "^2.5.16" },