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


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



  • 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



  • @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 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;
    


  • @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 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 :)



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.