React code quality with SonarQube on docker


mksolemn
React code quality with SonarQube on docker

Leverage SonarQube for increased confidence in your React project quality metrics. You can run SonarQube in docker to get the ability to continuously update your analysis through customization. Not only can you upgrade your analysis without having to install anything, but you can also leverage the build tooling to perform your own analysis.

Get docker running on your machine

https://docs.docker.com/get-docker/
You may need to increase max_map_count before running docker-compose up;

Increase max_map_count:

 – open terminal as administrator;

 – navigate to linux subsystem(Make sure you have wsl installed):

  wsl -d docker-desktop

 – update max_map_count:

  sysctl -w vm.max_map_count=262144

Run docker compose

Copy file https://github.com/SonarSource/docker-sonarqube/blob/master/example-compose-files/sq-with-postgres/docker-compose.yml;

Run docker-compose up;
If all goes well you should see output something like this:

Docker compose successful output

Now you’ll be able to access localhost:9000

SonarQube home screen

Code linting plugin for your IDE – SonarLint 

Depending on your IDE download and install SonarLint plugin https://www.sonarlint.org/

Integrating with React Project

SonarQube supports many different architectures, to test your React project you can add sonarqube-scanner to your project:

npm install -D sonarqube-scanner

or Globally

npm install -g sonarqube-scanner

Add configuration file sonarqube-scanner.js

const scanner = require('sonarqube-scanner');
scanner(
  {
    serverUrl: "http://localhost:9000",
    login:"admin",
    password:"admin",
    options: {
      "sonar.sources": "./src",
    },
  },
  () => process.exit()
);

finally, run sonarqube-scanner.js

node sonarqube-scanner.js
SonarQube project dashboard

Using with Jest

Merge results of jest test coverage reports:

"sonar.exclusions": "**/*.test.tsx",
"sonar.tests": "./src",
"sonar.test.inclusions": "**/*.test.tsx,**/*.test.ts",
"sonar.typescript.lcov.reportPaths": "coverage/lcov.info",
"sonar.testExecutionReportPaths": "test-report.xml"

Run Jest to generate a report output:

npm run test:coverage
node sonarqube-scanner.js

 

Show Comments (0)

Comments

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Game

How to: generate 2D matrix from an Array of random values with Javascript

In this tutorial, I will generate a 2D matrix from an Array of random values. Also, the values will be generated per matrix tile from a predefined array of objects. Let’s...

Posted on by mksolemn