I have integrated Jest with SonarQube, SonarQube execution is getting failure throwing the below error,
Error during parsing of generic test execution report '**/reports/test-reporter.xml'. Look at the SonarQube documentation to know the expected XML format.
and in SonarQube dashboard getting " Coverage on 0 New Lines to cover"
below is my sonar and package.json configuration
sonar.projectKey=projectname
sonar.projectVersion=1.0
sonar.sourceEncoding=UTF-8
sonar.branch.name=branchname
sonar.sources=**/src
sonar.tests=**/src/__test__
sonar.test.inclusions=**/src/__test__/*.spec.js
sonar.coverage.exclusions=**/src/__test__/__snapshots__/**
sonar.exclusions=**/src/assets/*
sonar.javascript.lcov.reportPaths=**/output/coverage/jest/lcov.info
sonar.testExecutionReportPaths=**/reports/test-reporter.xml
"jest": {
"verbose" :true,
"notify": true,
"testRegex": "((\\.|/*.)(spec))\\.js?$",
"moduleNameMapper": {
"^.+\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"moduleDirectories": ["node_modules", "src"],
"transformIgnorePatterns": [
"node_modules/(?!#agm)"
],
"testResultsProcessor": "jest-sonar-reporter",
"automock": false,
"collectCoverage":true,
"coverageReporters": [
"text",
"lcov"
],
"reporters": [
"default"
]
},
"jestSonar": {
"sonar56x": true,
"reportPath": "reports",
"reportFile": "test-reporter.xml",
"indent": 4
},
Please suggest me on this. TIA.
be aware that sonarqube in branch or pr analysis only displays the difference. Hence that it will not show you coverage information, when you do not have code changes in there. Code and details of code coverage not showing in SonarCloud for .Net solution explains this very well.
Make sure the files
sonar.javascript.lcov.reportPaths=\**/output/coverage/jest/lcov.info
sonar.testExecutionReportPaths=**/reports/test-reporter.xml
are visible to Sonar.
In my case, it helped to solve the problem.
Related
I am trying to integrate linting into an app created using CRA which uses typescript.
Steps to reproduce on terminal
create-react-app my-app --typescript
./node_modules/.bin/eslint --init
select : To check syntax, find problems, and enforce code style
select : JavaScript modules (import/export)
select : React
y for does your project use typescript
select : Browser
Popular style guide used is airbnb
My .eslintrc json file looks like the following
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"airbnb"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react",
"#typescript-eslint"
],
"rules": {
"semi":"warn"
}
}
I usually check if the lint works by removing semi colon to see if vs code highlights.
However it does not happen.
Adding the following snippet to settings.json on VS code works.
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
There are two types of setting ESLint in React CRA.
Local ESLint (Only affect the Editor such as VSCode)
ESLint when Compiling (When running yarn start and saving file)
As there are too much (not needed) information on the internet, I created an article about this in a much simpler way in here.
We are in the process of upgrading an AngularJS application to Angular with the incremental approach: we would like to be able to create new components in Angular and upgrade existing AngularJS components one by one, all this still with a functional application during the process.
We use the official documentation as well as several articles about hybrid Angular/AngularJS applications on real world applications.
Here are our attempts and the errors we get.
Context
AngularJS 1.7.3
Angular 6.1.7
Typescript 2.7.2
angular-cli
First steps
upgrade to AngularJS 1.7
remove Grunt and use angular-cli
use ngUpgrade (app.module.ts and app.module.ajs.ts)
Moving to Typscript: dealing with errors
That's the official process: rename .js files to .ts.
We then moved from Node require() to TypeScript module loading (var ... = require --> import ... = require)
Ideally, we should correct all the typing errors due to using the TypeScript compiler.
But the TypeScript doc states that's it's possible to do an incremental migration: being tolerant to TypeScript errors at the beginning in order to compile the js code without modifications (and stricter later on after fixing the code).
To achieve this, we used the awesome-typescript-loader instead of tsc to get theses options: transpileOnly, errorsAsWarnings (this requires the use of angular-builders/custom-webpack).
The options allow to pass the compilation, but it appears that the compilation is done twice: first without errors (warnings or not), but second with errors... so the build fails. How can we run only the first compilation?
Alternative attempt: keeping .js files, errors in importing and bootstrapping
We tried also an unofficial and unusual way to migrate the js code incrementally, that is keeping the original .js files alongside new .ts files.
We got some errors at compilation or application loading, related to importing AngularJS and to module management. Indeed the TypsScript module documentation states that:
Some libraries are designed to be used in many module loaders, or with no module loading (global variables). These are known as UMD modules. These libraries can be accessed through either an import or a global variable. ... can be used as a global variable, but only inside of a script. (A script is a file with no imports or exports.)
What we noticed:
in .js files: access to the AngularJS global angular (if we remove require("angular")) - script mode
in .ts files: we can't use import from angular, otherwise we get the error angular.module is undefined - module mode
With this in mind, we made the application compile and load in the browser without errors, but at the end:
this.upgrade.bootstrap(document.body, [App])
generates an error on AngularJS bootstrapping:
Angular 1.x not loaded !
How to fix this? It may be because we didn't import AngularJS in the TypeScript module way to avoid the previous error?
The official documentation mentions angular.IAngularStatic (still get an error)?
We can try also setAngularJSGlobal() ? Used when AngularJS is loaded lazily, and not available on window
By the way what is the difference between using [App] or ["App"] when calling bootstrap()?
... Since we are new to this upgrade process, we may be doing completely wrong things. Thank you for sharing your experience!
Configuration files
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "acd-banner-multicanal",
"projects": {
"acd-banner-multicanal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "target",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "./tsconfig.json",
"assets": [
"src/i18n",
"src/conf/conf.txt",
"src/conf/conf_DEFAULT.txt",
"src/systemjs.config.js",
{ "glob": "font-banner*", "input": "./node_modules/elq-font-icon/build/", "output": "/assets/fonts" },
"src/assets/images",
{ "glob": "system.js*", "input": "./node_modules/systemjs/dist/", "output": "/assets" },
"src/assets/images",
{ "glob": "**/*", "input": "./node_modules/tinymce/plugins", "output": "/assets/tinymce/plugins" },
{ "glob": "**/*", "input": "./node_modules/tinymce/skins", "output": "/assets/tinymce/skins" }
],
"styles": [
"src/assets/styles/style.less"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"aot": true,
"buildOptimizer": true
}
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "./karma.conf.js",
"scripts": [],
"styles": [
"src/assets/main.less"
],
"assets": [
"src/i18n",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"acd-ihm-angular-e2e": {
"root": "e2e/",
"sourceRoot": "e2e",
"projectType": "application",
}
},
"defaultProject": "acd-banner-multicanal",
"schematics": {
"#schematics/angular:component": {
"styleext": "less",
"lintFix": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "./target",
"sourceMap": true,
"experimentalDecorators": true,
"allowJs": true,
"baseUrl": "./",
"lib": [
"es2017",
"dom"
],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"paths": {
"angular": ["node_modules/angular/angular"]
}
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.spec.ts"
]
}
As for the angular 1.x not loaded error;
Did you install angularJS in the new application?
$ npm install --save angular#1.7.3 \
#types/angular
In the angular.json file you need to include the script:
"scripts": [
"../node_modules/angular/angular.js",
//etc...
],
Here's an example of upgrading an application that seem similar to what you have.
Alternatively you can bring in angular into the import chain by importing it in main.ts;
import * as angular from 'angular';
This might be a better option since it makes angular cli / webpack aware of angularJS and may prevent errors such as "WARNING: Tried to Load Angular More Than Once" that may arise if some other component (such as the hybrid router imports angular).
I confirm that the answer works, we've been able to run our application in hybrid mode. In fact, in AngularJs, we used grunt and browserify, and we had packaged some libraries using the package.json browser field. To do the same, we had to declare the libraries to load in the browser in angular.js / build.options.scripts:
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/jquery-ui-dist/jquery-ui.js",
"./node_modules/moment/moment.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap- datetimepicker.js",
"./node_modules/bootstrap-tour/build/js/bootstrap-tour.js",
"./node_modules/angular/angular.js",
"./node_modules/ng-table/bundles/ng-table.js"`
]
Thanks a lot.
That may be useful to add in the Angular documentation? Indeed, the examples given in https://angular.io/guide/upgrade#bootstrapping-hybrid-applications are based on SystemJS, whereas we just use Webpack (already used by Angular).
Indeed, there is an issue about the angular doc, the migration doc is not yet updated for angular-cli (that's why it is about SystemJS).
I got this problem:
Sometimes jest cannot find modules while running tests. it's totally random module each time, not the same one. First one or two test suits fails because of that, rest are passing. Sometimes everything is okay. I use babel.
jest config in package.json
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"src/**/*.jsx"
],
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"\\.(css|less|scss)$": "babel-jest",
"\\.(jpg|jpeg|png|svg)$": "<rootDir>/fileMock.js"
},
"setupFiles": [
"./testsSetup.js"
],
"testURL": "http://localhost"
},
testSetup.js
const { configure } = require('enzyme')
const Adapter = require('enzyme-adapter-react-16')
configure({ adapter: new Adapter() })
i run tests with npm test set to jest --color --coverage --notify
is there something i lack in my config or something wrong here? couldn't find an alike problem
I have similar issues from time to time - usually when switching from and to branches with lots of changes.
Clearing jest's cache solved my issues.
./node_modules/.bin/jest --clearCache
More details on clearCache.
You could also check jest's showconfig and manually delete cacheDirectory location - same thing clearCache does.
Hope this helps!
I am converting existing tests to use typescript with ts-jest and I have everything finding all the files but all of the tests fail with the error
FAIL src/components/Buttons/__tests__/index.tsx
● Test suite failed to run
Error: No message was provided
I have no idea what is going on and I can't seem to find anyone who had the same problem by Googling either, which is scary...
package.json with jest config
"jest": {
"globals": {
"ts-jest": {
"tsConfigFile": "<rootDir>/tsconfig.json",
"babelConfig": {
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
}
},
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts",
"verbose": true,
"transform": {
"^.+\\.tsx?$": "ts-jest"
},
"testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"typeface-roboto|\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
},
"moduleFileExtensions": [
"ts", "tsx", "js", "jsx", "json", "node"
]
},
example test file...
import React from 'react';
import { shallow } from 'enzyme';
import Account from '../account';
it('renders without crashing', () => {
expect(shallow(<Account />)).toBe(1);
});
I found that adding a tsconfig.json file in my project directory fixed this issue.
My tsconfig.json file didn't need anything special in fact it didn't need anything at all! Simply having a blank tsconfig.json file allowed my tests to run.
I was getting similar error for 3 test suits and one was running perfectly. These were running before code merge. After investigation I found that My components are having AAD authentication and the configuration for the same were missing, which I removed for doing check-in. After adding correct configuration resolved my issue.
for some reason, having my tsconfig in the settings was causing the problem. I put it there even though it was the standard name and place (tsconfig.js in the project root)
as soon as I deleted this, I had more errors in my config to clear, but it got past the error in my question
I want to combine storybooks and jest snapshot testing, but I don't get it working.
As soon as I follow the doc and add the Snapshot.test.js, it leads to following error, when I run npm test.
FAIL ./Storyshots.test.js Test suite failed to run
Cannot find module '../../package' from 'node.js'
at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:169:17)
at Object.<anonymous> (node_modules/babel-core/lib/api/node.js:60:16)
anyone has a clue / hint if this is a failure of implementation or a bug?
thnx a lot!
this is my jest configuration, it my gives a hint?
"jest": {
"rootDir": "",
"transform": {
".*": "<rootDir>/node_modules/babel-jest"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"collectCoverage": false,
"collectCoverageFrom": [
"**/*.{js,jsx}",
"!**/node_modules/**",
"!**/vendor/**"
],
"coverageDirectory": "<rootDir>/coverage",
"setupTestFrameworkScriptFile": "<rootDir>/jestSetup.js",
"unmockedModulePathPatterns": [
"<rootDir>/node_modules/react",
"<rootDir>/node_modules/react-dom",
"<rootDir>/node_modules/react-addons-test-utils",
"moment",
"jasmine-expect-jsx",
"fbjs",
"enzyme",
"expect",
"cheerio",
"htmlparser2",
"lodash",
"domhandler",
"object.assign",
"define-properties",
"function-bind",
"object-keys",
"object.values",
"es-abstract"
]
},
I had this same problem and my solution was add "json" into "moduleFileExtensions", just like this:
...
"moduleFileExtensions": [
"js",
"jsx",
"json"
],
...
Seems like the file 'package' was not a js[x] file, but a json one, and jest refused to load it.