No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Configuration whit Jest

    Help
    8
    18
    7468
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • L
      leon last edited by

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

      Tks a lot !

      1 Reply Last reply Reply Quote 0
      • L
        leon last edited by 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

        1 Reply Last reply Reply Quote 0
        • L
          leon last edited by leon

          This post is deleted!
          1 Reply Last reply Reply Quote 0
          • P
            paul last edited by

            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.

            1 Reply Last reply Reply Quote 0
            • L
              leon last edited by

              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)"
                  ]
                }
              1 Reply Last reply Reply Quote 0
              • L
                leon last edited by

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

                1 Reply Last reply Reply Quote 0
                • L
                  leon last edited by

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

                  1 Reply Last reply Reply Quote 0
                  • L
                    leon last edited by

                    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.

                    1 Reply Last reply Reply Quote 0
                    • Z
                      zyegfryed last edited by

                      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 1 Reply Last reply Reply Quote 0
                      • Jaxon
                        Jaxon @zyegfryed last edited by 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.

                        T 1 Reply Last reply Reply Quote 1
                        • L
                          leon last edited by

                          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

                          T 1 Reply Last reply Reply Quote 0
                          • T
                            trajano @Jaxon last edited by 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;
                            
                            1 Reply Last reply Reply Quote 0
                            • T
                              trajano @leon last edited by 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.

                              L 1 Reply Last reply Reply Quote 0
                              • L
                                leon @trajano last edited by

                                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 ?

                                1 Reply Last reply Reply Quote 0
                                • cybercouac
                                  cybercouac last edited by

                                  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 🙂

                                  1 Reply Last reply Reply Quote 0
                                  • cybercouac
                                    cybercouac last edited by

                                    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.

                                    1 Reply Last reply Reply Quote 1
                                    • R
                                      Rick last edited by

                                      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
                                      1 Reply Last reply Reply Quote 0
                                      • V
                                        vantage_saunders last edited by

                                        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"
                                          },
                                        
                                        1 Reply Last reply Reply Quote 0
                                        • First post
                                          Last post