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.