Help to get @quasar/testing Jest with coverage setup with Typescript

[aislan]

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.

[m1chaeltran]

I ran into the same issue but managed to get it working.
Hopes it helps others.

Here are the changes in addition to the default:

1. yarn add @babel/preset-typescript babel-jest
2. in the jest.conf.js file, I’ve included the ts files

transform: {
    ...
    '^.+\\.(ts|js)$': 'babel-jest',
    ...

The test now runs and working.

Side note, I am seeing this error/warning but it isn’t affecting the test runner

  console.error ../../node_modules/@vue/test-utils/dist/vue-test-utils.js:1735
    [vue-test-utils]: isVueInstance is deprecated and will be removed in the next major version.

[m1chaeltran]

3| Finally Add @babel/preset-typescript to babel.config.js presets file

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