I’ve just installed @quasar/testing with Jest, Cypress and Lighthouse chosen as my tools for testing.
What I did was to run: quasar ext add @quasar/testing and select the tools above without any additional stuff.
We are using Typescript in this project, with a bunch of interfaces, classes, types and whatever.
The problem here is that running quasar run @quasar/testing test --unit=jest that by default runs coverage as well, is not recognizing my Typescript syntax in my files and return errors related to syntax and errors related to export. One of them is:

Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
STACK: SyntaxError: /home/aislan/Projetos/Vue/MyProject/quasar_test/atlas-front/src/models/userInformation.ts: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (1:8):

> 1 | export interface UserInformationModel {
    |        ^
  2 |   id?: string;
  3 |   password: string;
  4 |   user_id: string;

And here is config files without any modification from what Quasar brings to us:

babel.conf.js:

const fs = require('fs-extra');
let extend = undefined;

/**
 * The .babelrc file has been created to assist Jest for transpiling.
 * You should keep your application's babel rules in this file.
 */

if (fs.existsSync('./.babelrc')) {
  extend = './.babelrc';
}

module.exports = {
  presets: ['@quasar/babel-preset-app'],
  extends: extend
};

.babelrc:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs",
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

jest.conf.js:

module.exports = {
  globals: {
    __DEV__: true
  },
  setupFilesAfterEnv: ['<rootDir>/test/jest/jest.setup.ts'],
  // noStackTrace: true,
  // bail: true,
  // cache: false,
  // verbose: true,
  // watch: true,
  collectCoverage: true,
  coverageDirectory: '<rootDir>/test/jest/coverage',
  collectCoverageFrom: [
    '<rootDir>/src/**/*.vue',
    '<rootDir>/src/**/*.js',
    '<rootDir>/src/**/*.ts',
    '<rootDir>/src/**/*.jsx'
  ],
  coverageThreshold: {
    global: {
      //  branches: 50,
      //  functions: 50,
      //  lines: 50,
      //  statements: 50
    }
  },
  testMatch: [
    '<rootDir>/test/jest/__tests__/**/*.spec.js',
    '<rootDir>/test/jest/__tests__/**/*.test.js',
    '<rootDir>/src/**/__tests__/*_jest.spec.js',
    '<rootDir>/src/**/*.spec.ts'
  ],
  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
  moduleNameMapper: {
    '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.js',
    '^test-utils$':
      '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.js',
    '^quasar$': '<rootDir>/node_modules/quasar/dist/quasar.common.js',
    '^~/(.*)$': '<rootDir>/$1',
    '^src/(.*)$': '<rootDir>/src/$1',
    '.*css$': '<rootDir>/test/jest/utils/stub.css'
  },
  transform: {
    '.*\\.vue$': 'vue-jest',
    '.*\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub'
    // use these if NPM is being flaky
    // '.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
    // '.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!quasar/lang)'],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
};

I have tried to add @babel/plugin-proposal-export-default-from in .babelrc and babel.conf.js to get rid of export error, but no success.
Any help I’ll be really grateful.

@cmanique if this work with local pagination, it’s fine.
But with this bottom-row I can follow the columns and each q-td get hidden together when toggling the visible cols (the respective q-td of the tbody and q-th for header?

@rld how do you populate those variable process.env.VUE_APP_COMMITHASH and process.env.VUE_APP_BRANCH.

I think that could be something dynamically, but how ?

And what this thing “upload-sourcemaps” you mentioned in the RUN command ?

Since in Quasar projects we don’t have the file webpack.config.js will necessary to install @sentry/webpack-plugin ?

@dobbel yeah, and this documentation doesn’t mention about configuring the plugins with Cypress, etc.
It is kind of simplistic at most.

For me it’s happening the same problem.
“yarn install” doesn’t fix it to me.

quasar/cli installed is “1.1.2”

I’m trying to configure Cypress reports in my Quasar project, but I’m not sure where to put my configs because Quasar projects are different than Vue cli projects and all tutorials I’ve encountered is only presented with Vue cli config.
So I did follow some of them but my reports can’t detect my Vue component files to analyse the tests coverage on my codebase.

Any help will be appreciated!!! Thanks!

Can we use Quasar v2 with Vite ???

Right now I’m just struggling with Quasar to place my worker files in another place not in statics folder.
I would like to put them next my actions folder, etc.

Someone knows how to achieve it?

And related to workerize-loader, how could we test them with Jest, for example ?

@qyloxe and what about testing with Jest, for example??
This solution workerize-loader will work out-of-box with unit test ? If it won’t, how to make it work in a testing scenario ?
Sometime we forget about testing and complexities the solutions for our code brings when testing the codebase.

@cmanique if this work with local pagination, it’s fine.
But with this bottom-row I can follow the columns and each q-td get hidden together when toggling the visible cols (the respective q-td of the tbody and q-th for header?

Re: qtable summary footer

As this topic above, I’m looking for this feature as well. The QTable doesn’t have a footer by default?
I wasn’t expecting that a component like the table shouldn’t have a basic feature like that. We have so many options, but this doesn’t exist in the docs

What kind of footer I’m trying to do is like in this design below, just only a footer row that have for each columns a total count. This total count should appear and disappear with the column itself, of course.

Would be great if we have this footer sticky as well.

Anyone knows how to accomplish that ? In advance, many thanks for this awesome framework!!

I’ve just installed @quasar/testing with Jest, Cypress and Lighthouse chosen as my tools for testing.
What I did was to run: quasar ext add @quasar/testing and select the tools above without any additional stuff.
We are using Typescript in this project, with a bunch of interfaces, classes, types and whatever.
The problem here is that running quasar run @quasar/testing test --unit=jest that by default runs coverage as well, is not recognizing my Typescript syntax in my files and return errors related to syntax and errors related to export. One of them is:

Add @babel/plugin-proposal-export-default-from (https://git.io/vb4yH) to the 'plugins' section of your Babel config to enable transformation.
STACK: SyntaxError: /home/aislan/Projetos/Vue/MyProject/quasar_test/atlas-front/src/models/userInformation.ts: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (1:8):

> 1 | export interface UserInformationModel {
    |        ^
  2 |   id?: string;
  3 |   password: string;
  4 |   user_id: string;

And here is config files without any modification from what Quasar brings to us:

babel.conf.js:

const fs = require('fs-extra');
let extend = undefined;

/**
 * The .babelrc file has been created to assist Jest for transpiling.
 * You should keep your application's babel rules in this file.
 */

if (fs.existsSync('./.babelrc')) {
  extend = './.babelrc';
}

module.exports = {
  presets: ['@quasar/babel-preset-app'],
  extends: extend
};

.babelrc:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"],
  "env": {
    "test": {
      "plugins": ["dynamic-import-node"],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": "commonjs",
            "targets": {
              "node": "current"
            }
          }
        ]
      ]
    }
  }
}

jest.conf.js:

module.exports = {
  globals: {
    __DEV__: true
  },
  setupFilesAfterEnv: ['<rootDir>/test/jest/jest.setup.ts'],
  // noStackTrace: true,
  // bail: true,
  // cache: false,
  // verbose: true,
  // watch: true,
  collectCoverage: true,
  coverageDirectory: '<rootDir>/test/jest/coverage',
  collectCoverageFrom: [
    '<rootDir>/src/**/*.vue',
    '<rootDir>/src/**/*.js',
    '<rootDir>/src/**/*.ts',
    '<rootDir>/src/**/*.jsx'
  ],
  coverageThreshold: {
    global: {
      //  branches: 50,
      //  functions: 50,
      //  lines: 50,
      //  statements: 50
    }
  },
  testMatch: [
    '<rootDir>/test/jest/__tests__/**/*.spec.js',
    '<rootDir>/test/jest/__tests__/**/*.test.js',
    '<rootDir>/src/**/__tests__/*_jest.spec.js',
    '<rootDir>/src/**/*.spec.ts'
  ],
  moduleFileExtensions: ['vue', 'js', 'jsx', 'json', 'ts', 'tsx'],
  moduleNameMapper: {
    '^vue$': '<rootDir>/node_modules/vue/dist/vue.common.js',
    '^test-utils$':
      '<rootDir>/node_modules/@vue/test-utils/dist/vue-test-utils.js',
    '^quasar$': '<rootDir>/node_modules/quasar/dist/quasar.common.js',
    '^~/(.*)$': '<rootDir>/$1',
    '^src/(.*)$': '<rootDir>/src/$1',
    '.*css$': '<rootDir>/test/jest/utils/stub.css'
  },
  transform: {
    '.*\\.vue$': 'vue-jest',
    '.*\\.js$': 'babel-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub'
    // use these if NPM is being flaky
    // '.*\\.vue$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/vue-jest',
    // '.*\\.js$': '<rootDir>/node_modules/@quasar/quasar-app-extension-testing-unit-jest/node_modules/babel-jest'
  },
  transformIgnorePatterns: ['<rootDir>/node_modules/(?!quasar/lang)'],
  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue']
};

I have tried to add @babel/plugin-proposal-export-default-from in .babelrc and babel.conf.js to get rid of export error, but no success.
Any help I’ll be really grateful.