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?

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

Many thanks @Allan-EN-GB . I’m really grateful with your tip. For ours it’s working like a charm!!
Huge lifetime saver.

I have the same impression, but this option is possible with the QRange component.
Check out them. https://quasar.dev/vue-components/range#Installation

Hello guys, I’m here to ask help to fix or at least decrease a little bit my huge compilation time and hmr updates.
Sometimes it take ~5m in my machine, but in in the other machines it is ~10m and for HMR is like 5 or 10sec when saving some components. The project isn’t that big.
My project was being developed with Vue CLI 3 and Vuetify with compilation times really lower than now., but I have chosen to bring it to Quasar because the layout responsive classes here just works and components are better in general.
To convert it to Quasar, what I did was just create a new project with Quasar CLI and add the extension plugin with quasar ext add @quasar/typescript and set some defaults and bring live the Quasar components replacing the old ones in the project.

Here is my tsconfig file as it is set right now:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "allowJs": true,
    "sourceMap": false,
    "experimentalDecorators": true,
    "target": "esnext",
    "strict": true,
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["quasar"]
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["dist", ".quasar", "node_modules"]
}

and for quasar.conf.js I have set two aliases:

extendWebpack(cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/,
          options: {
            formatter: require('eslint').CLIEngine.getFormatter('stylish')
          }
        });
        cfg.resolve.alias = {
          ...cfg.resolve.alias,
          modules: path.resolve(__dirname, './src/modules'),
          '@': path.resolve(__dirname, './src')
        };
      }
    },

In the same file I have support TS set as below:

supportTS: {
  tsCheckerConfig: {
     eslint: true
  }
},

Any helps will be much appreciated.