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.

Step 1: Consistent coverage measurement

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.

Step 2: Displaying tests in Sonar

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.

1. Install jest-sonar-reporter to generate JUnit style reports for sonar

    yarn add -D jest-sonar-reporter
   

2. 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.

3. 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.

Step 3: Display ESLint/Prettier issues in Sonar

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:

• Change the linting script in package.json so that it will create an output file

"lint": "eslint 'src' -f json -o eslint_report.json"

• Feed the report into sonar by adding this to sonar-project.properties

sonar.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.