Search for a command to run...
I am a senior software engineer and team lead. What keeps me rolling is finding the best solution for complex problems while being passionate about quality in general.
I like to read and talk about new technologies and to mentor in my area of expertise.
No comments yet. Be the first to comment.
As my team was in the process of migrating a legacy application, we encountered the need to develop a portion of the old frontend originally written in the Eclipse RCP platform. I had prior experience with Eclipse IDE but it became evident that adapt...
If you use GitHub Actions, you probably faced the obstacle of deleting workflow runs manually that belonged to long gone branches. So what usually happens is you create a feature branch for example, do your magic there and if you use CI/CD pipelines,...
In modern software development, ensuring code quality, maintainability, and test coverage are paramount. Jest, ESLint, Prettier, and SonarQube are powerful tools that aid developers in achieving these goals.
Jest is a delightful JavaScript testing framework with a focus on simplicity and flexibility, making it an excellent choice for writing unit tests.
ESLint provides static code analysis to identify problematic patterns in JavaScript code, enforcing coding standards and catching potential bugs.
Prettier automatically formats code to maintain consistency across the project, enhancing readability and reducing friction in code reviews.
SonarQube, on the other hand, offers comprehensive code quality and security analysis, aggregating insights from various tools to provide actionable feedback on code quality, test coverage, and security vulnerabilities.
In this blog post, we'll explore how to set up and integrate these tools seamlessly to ensure high-quality code and effective test coverage visibility in SonarQube.
To see consistent coverage metrics locally and in your Sonar, you need to have these things identically set:
Property coveragePathIgnorePatterns in jest.config.js file
Property sonar.coverage.exclusions in sonar-project.properties file
These exclusion patterns need to match to see same results locally and in Sonar.
Locally you can run test coverage with jest --coverage or you can specify a script for that in your package.json.
The following table shows what Sonar metrics correspond to the Jest metrics in the test coverage report.
| Sonar | Jest |
| Condition Coverage | % Branch |
| Line Coverage | % Lines |
| Coverage | % Stmts |
| - | % Funcs |
By default the unit tests in Jest do not show up in Sonar, only the coverage. For that you need JUnit style reports which can be done with jest-sonar-reporter for example.
Install jest-sonar-reporter to generate JUnit style reports for sonar
yarn add -D jest-sonar-reporter
Configure jest to use jest-sonar-reporter. Add a result processor to jest.config.js:
testResultsProcessor: 'jest-sonar-reporter'
testMatch: ['**/*.test.ts', '**/*.test.tsx', '**/*.test.js', '**/*.test.jsx']
Second line testMatch is optional and not required, however it is a good idea to keep configuration in synch with sonar. This configuration will create a test-result.xml when you run jest --coverage.
Configure Sonar to process this report by adding these to sonar-project.properties
sonar.testExecutionReportPaths=test-report.xml
sonar.test.inclusions=**/*.test.tsx,**/*.test.ts,**/*.test.jsx,**/*.test.js
sonar.tests=src
The result of this is that sonar report will display unit tests accordingly.
The only difficulty of using both ESLint and Prettier together is that they have different code formatting approaches. This can lead to conflicts between the two tools.
To make it easier to use both ESLint and Prettier together, we can use the ESLint plugin for Prettier. This plugin will combine Prettier's formatting rules with ESLint to ensure your code is appropriately formatted and follows your coding standards.
Another option is to use GTS which comes with integration out of the box.
The aim here to show the integration with Sonar, so I will not dive into how to integrate ESLint and Prettier, you basically need to use eslint-config-prettier and eslint-plugin-prettier as dev dependencies and you can read about setting them up here and here.
Once you have a working ESLint - Prettier integration, follow these steps:
package.json so that it will create an output file"lint": "eslint 'src' -f json -o eslint_report.json"
sonar-project.propertiessonar.eslint.reportPaths=eslint_report.json
Before the sonar scanner you need to run these command though
yarn test-coverage
yarn lint
Now Sonar will display all ESLint issues in the report.
