Configuration whit Jest

leon

Someone using Jest for testing whit quasar?
Can show it working whit quasar template from cli ?

Tks a lot !

leon

 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

leon

This post is deleted!

paul

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.

leon

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_modules

i’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)"
    ]
  }

leon

Reading jest config, transform make the transpilations.
But its not happing for node_modules imported depedencys

leon

Btw, i aggre. If we get a mature config of Jest, it enter in quasar base template.

leon

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

Hi @leon ,
Did you successfully managed to configure jest?
I followed that article 1 to setup jest, but I’m stuck with a Cannot find module 'quasar' from 'Messenger.vue' error raised when running npm run unit. Any tip to fix it?
Thanks

Jaxon

@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.

leon

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

trajano

@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 the export

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;

trajano

@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.

leon

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 ?

cybercouac

Hi @trajano , hi all,

I ran into TypeError: Cannot read property 'theme' of undefined as well. My error stack was pointing a problem with quasar.esm.js, where I found out ctx.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, so ctx.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

cybercouac

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.

Rick

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

vantage_saunders

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"
  },

No More Posting New Topics!

Configuration whit Jest