Failed to collect coverage from xxx.vue jest - jestjs

I got this log when I run yarn test.
I've tried to delete node_modules, reinstall all the dependencies and run yarn test --no-cache, but it doesn't work.
yarn run v1.22.10
$ jest --coverage
PASS __test__/src/App.test.ts
√ test1 (2 ms)
Running coverage on untested files...Failed to collect coverage from D:\svn-frontend-admin\src\App.vue
ERROR: Unexpected token ] in JSON at position 6179
STACK: SyntaxError: Unexpected token ] in JSON at position 6179
These are my config files
// jest.config.js
module.exports = {
......
preset: 'ts-jest',
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{js,ts,vue}', 'src/*.{ts,vue}'],
coverageReporters: ['clover'],
moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'vue'],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': require.resolve('jest-transform-stub'),
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.jsx?$': 'babel-jest',
},
transformIgnorePatterns: [
'node_modules/(?!(#babel/runtime-corejs3/helpers/esm/.*)|(vue/dist/.*))'
],
......
};

Related

Why am I getting "Jest encountered an unexpected token" when using detox with expo-updates?

I want to use expo-updates package with detox and jest, however I keep getting the following error:
FAIL test/e2e/starter.test.ts..
● Test suite failed to run
Jest encountered an unexpected token
...
Details:
<Redacted>/node_modules/expo-updates/build/index.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){export * from './Updates';
^^^^^^
SyntaxError: Unexpected token 'export'
1 | import { expect, device, by } from 'detox'
> 2 | import * as Updates from 'expo-updates'
| ^
3 |
4 | describe('Example', () => {
5 | beforeAll(async () => {
I have this jest.config.js
module.exports = {
preset: 'ts-jest',
rootDir: '..',
testMatch: ['<rootDir>/**/*.test.ts'],
testTimeout: 120000,
maxWorkers: 1,
reporters: ['detox/runners/jest/reporter'],
globalSetup: 'detox/runners/jest/globalSetup',
globalTeardown: 'detox/runners/jest/globalTeardown',
testEnvironment: 'detox/runners/jest/testEnvironment',
transformIgnorePatterns: ['node_modules/(?!expo-updates)'],
transform: {
'^.+\\.ts?$': 'ts-jest',
'^.+\\.(js|jsx)$': 'babel-jest',
},
verbose: true,
}
and I added to babel.config.js
presets: [
['#babel/preset-env', { targets: { node: 'current' } }],
'#babel/preset-typescript',
]
So what else can I do?
Using these versions:
ts-jest: 29.0.3
babel: 29.3.1
expo-updates: 0.14.7

babel-jest: Babel ignores app/utils/myfile.js - make sure to include the file in Jest's transformIgnorePatterns as well

I cannot get my jest tests to run when I have ignored a file with babel:
babel.config.js:
module.exports = {
ignore: ['./app/utils/myfile.js'],
presets: [
[
'#babel/preset-env',
{
targets: {
node: '14',
},
useBuiltIns: 'entry',
corejs: '3.8',
},
],
],
};
jest.config.js:
module.exports = {
coverageDirectory: 'coverage',
setupFiles: ['./jest.init.js'],
testEnvironment: 'node',
testMatch: ['**/?(*.)+(spec|test).js'],
transform: {
'^.+\\.(js|jsx)$': 'babel-jest',
},
transformIgnorePatterns: ['myfile'],
testPathIgnorePatterns: ['/node_modules/'],
};
i have added myfile.js to the babel ignore and to the jest transformIgnorePatterns. what could it be?

Can't run wallaby.js with jest in vscode

I have a project with jest and typescript. When I run jest, the tests run correctly.
I prepared the wallaby.config.js file:
// wallaby.config.js
export default function () {
return {
autoDetect: true,
trace: true,
files: ['src/**', '!**/*Spec.ts'],
tests: ['__tests__/**/*Spec.ts'],
debug: true,
env: {
type: 'node',
runner: 'node',
},
};
}
When I try to start I get:
Failed to initialize wallaby jest. 
Failed to read Jest configuration from '.': m is not defined 
My packages.json as type = "module"
Also, my jest.config.js looks like:
export default {
verbose: true,
testMatch: ['<rootDir>/__tests__/**/*.ts'],
preset: 'ts-jest',
testEnvironment: 'node',
};
As I said at begin, if I type npx jest works correctly.
I want wallaby working on my vscode.
Finally I found a workaround.
First of all install jasmine and esm as dev dependency.
Now update the wallay.config.js file:
export default function configure(wallaby) {
return {
trace: true,
files: ['src/**', '!**/*Spec.ts'],
tests: ['__tests__/**/*Spec.ts'],
debug: true,
testFramework: 'jasmine', // <- added
env: {
type: 'node',
runner: 'node',
params: { //
runner: `-r esm`, // <- added
}, //
},
};
}
Now all work. I'm running test manually with jest and wallaby is using jasmine. It doesn't seem best way but works for now.

Jest: SyntaxError: Unexpected token 'export' happens at tslib.es6.js

I get this error:
C:\Users\myname\Projects\ConfigEditor\MesConfiguration.WebClient\node_modules\tslib\tslib.es6.js:24
export function __extends(d, b) {
^^^^^^
SyntaxError: Unexpected token 'export'
My jest-esm.config.mjs looks like this
const jestConfig = {
preset: 'jest-preset-angular/presets/defaults-esm',
extensionsToTreatAsEsm: ['.ts'],
globals: {
'ts-jest': {
useESM: true,
stringifyContentPathRegex: '\\.(html|svg)$',
tsconfig: '<rootDir>/tsconfig-esm.spec.json',
},
},
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'html', 'js', 'json', 'mjs'],
resolver: 'jest-preset-angular/build/resolvers/ng-jest-resolver.js',
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)'],
transform: {
'^.+\\.(ts|js|mjs|html|svg)$': 'jest-preset-angular',
},
globalSetup: 'jest-preset-angular/global-setup',
moduleNameMapper: {
//tslib: 'tslib/tslib.mjs',
tslib: 'tslib/tslib.es6.js',
"#shared/(.*)": "<rootDir>/src/app/shared/$1",
"#editors/(.*)": "<rootDir>/src/app/editors/$1",
"#dashboard/(.*)": "<rootDir>/src/app/dashboard/$1",
"#env": "<rootDir>/src/environments/environment",
},
setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
}
export default jestConfig;
package.json has
"type": "module",
I start the test with
"test-esm": "node --experimental-vm-modules --no-warnings node_modules/jest/bin/jest.js -c=jest-esm.config.mjs --no-cache",
What ist wrong?
After renaming the tslib.es6.js to tslib.mjs the error is gone, but this is no solution. It should work after any yarn install
The error is gone because you have set
transformIgnorePatterns: ['node_modules/(?!.*\\.mjs$)']
you are basically using the preset jest-preset-angular/presets/defaults-esm So most of the properties you are typing in the config are redundant
One thing is that the transformIgnorePatterns somehow does not work with multiple items in that array (in some cases) so it is better to put everything at once like in my case
transformIgnorePatterns: ['node_modules/(?!rxjs|tslib)']
here is my full jest.config.js and setup-jest.ts file I am using with Angular14 with the ESM execution node --experimental-vm-modules node_modules/jest/bin/jest.js
// jest-config.ts
module.exports = {
preset: 'jest-preset-angular/presets/defaults-esm',
testRegex: '.*spec.ts$',
transformIgnorePatterns: [
'node_modules/(?!rxjs|tslib)'
],
moduleNameMapper: {
"^dnd-core$": "dnd-core/dist",
"^react-dnd$": "react-dnd/dist",
"^react-dnd-html5-backend$": "react-dnd-html5-backend/dist",
"^react-dnd-touch-backend$": "react-dnd-touch-backend/dist",
"^react-dnd-test-backend$": "react-dnd-test-backend/dist",
"^react-dnd-test-utils$": "react-dnd-test-utils/dist"
},
setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
};
// setup-jest.ts
import 'jest-preset-angular/setup-jest.mjs';
Object.defineProperty(window, "getComputedStyle", {
value: () => ["-webkit-appearance"]
});

Jest - Cannot generate cobertura coverage report for my projects

I'm using jest in a monorepo. I would like to generate a Cobertura report when testing a some of my projects.
Jest.config.base.js
module.exports = {
preset: '#vue/cli-plugin-unit-jest/presets/typescript-and-babel',
transform: {
'vee-validate/dist/rules': 'babel-jest',
'.*\\.(vue)$': 'vue-jest',
'^.+\\.(ts|tsx)$': 'ts-jest',
},
testMatch: [
'**/*.(spec|test).(js|jsx|ts|tsx)',
],
testEnvironmentOptions: {
// Allow test environment to fire onload event
// See https://github.com/jsdom/jsdom/issues/1816#issuecomment-355188615
resources: 'usable',
},
reporters: [
'default',
[
'jest-trx-results-processor',
{
outputFile: './coverage/test-results.trx',
defaultUserName: 'user name to use if automatic detection fails',
},
],
],
moduleFileExtensions: [
'js',
'ts',
'json',
'vue',
],
testURL: 'http://localhost/',
snapshotSerializers: [
'jest-serializer-vue',
],
runner: 'groups',
};
Jest.config (root)
const baseConfig = require('./jest.config.base')
module.exports = {
...baseConfig,
projects: [
'<rootDir>/apps/my-app',
'<rootDir>/apps/my-app-copy',
'<rootDir>/libs/my-lib',
],
coverageDirectory: '<rootDir>/coverage/',
};
Jest.config (my-app)
const baseConfig = require('../../jest.config.base');
const packageJson = require('./package.json');
module.exports = {
...baseConfig,
transformIgnorePatterns: [],
roots: [
'<rootDir>/src',
],
name: packageJson.name,
displayName: packageJson.name,
};
I did not paste other jest.config to save space, but they are similar.
What works
If I run jest --coverage --coverageReporters=cobertura, it will generate a Cobertura report, but all my projects will be tested.
What does not work
If I run jest --projects apps/my-app apps/my-app-copy --coverage --coverageReporters=cobertura, only test-results.trx is generated.
Question
How could I test only 2 projects out of 3, and generate a single Cobertura report for those?
I'm working on something similar in our monorepo and I was able to generate the cobertura report installing jest-junit and defining the reporters in the root jest.config like this
coverageReporters: ['html', 'text', 'text-summary', 'cobertura'],
Then I run jest --coverage

Resources