Sonar cloud integration with Github repository for React Native App — Part 2.

So as per part 1, we still need to create a code coverage report and show value on the QualityGate result and overview. In this part, we will cover how to do that along with a basic understanding of the properties.

1. If you want to exclude some from files form your project like you don’t want the Quality Gate to Scan it or analyze it, please add this property in sonar-project.properties file e.g usually we don’t want Sonar Cloud to scan or analyze iOS or android folder so for that add this property in that file and push that change on Github.

sonar.coverage.exclusions=**/android/**/*.*,**/ios/**/*.* (this will remove this files / folders from coverage)

sonar.exclusions=**/android/**/*.*,**/ios/**/*.* (this will remove this files / folders from analysis)

2. By default the Sonar Cloud does not scan jsx or tsx files, So in order to enable you to need to add a property in sonar-project.properties file, add the below line and push the code in your repository

sonar.javascript.file.suffixes=.js,.jsx

sonar.typescript.file.suffixes=.ts,.tsx

Code Coverage display to QualityGate.

By default, the Sonar cloud does not give a report about the code coverage. We need manually add a property and write a test case in Jest, enzyme, and generated report get integrated with the Sonar cloud.

a) Add below property (some property added just to avoid some files in coverage that are not needed) in sonar-project.properties.

sonar.sources=.

sonar.exclusions=**/__tests__/*.tsx , **/coverage/**/*.js,**/setupTests.ts,**/babel.config.js,**/index.js, **/metro.config.js, **/App.tsx

sonar.language=js,jsx,ts,tsx

sonar.tests=./__tests__

sonar.javascript.lcov.reportPaths=./coverage/lcov.info

sonar.testExecutionReportPaths=./test-report.xml

sonar.sourceEncoding=UTF-8

b) Add main.yml file to GitHub / workflow in your project root,

on:

# Trigger analysis when pushing in master or pull requests, and when creating

# a pull request.

push:

branches:

- master

pull_request:

types: [opened, synchronize, reopened]

name: Main Workflow

jobs:

sonarcloud:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v2

with:

fetch-depth: 0

- name: Get master

run: git fetch origin master

- name: Install dependencies

run: npm install

- name: Install Jest globally

run: sudo npm install -g jest

- name: Run Tests

run: npm run test

- name: SonarCloud Scan

uses: sonarsource/sonarcloud-github-action@master

env:

GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}

Test: Now test this by making a PR or Merge to master,

Quality Gate Scan for PR:

Overall report after the merge to master:

Before

After

Useful Stuff :

Overall setting file code

sonar.projectKey=sandeeprajbharroyalcyber_QalityGate

sonar.organization=sandeeprajbharroyalcyber

sonar.source = SonarQualityTest

​sonar.coverage.exclusions=**/android/**/*.*,**/ios/**/*.*,

​sonar.exclusions=**/android/**/*.*,**/ios/**/*.*,

sonar.javascript.file.suffixes=.js,.jsx,

sonar.typescript.file.suffixes=.ts,.tsx,

sonar.java.binaries=.

sonar.c.file.suffixes=-

sonar.cpp.file.suffixes=-

sonar.objc.file.suffixes=-

sonar.html.file.suffixes=-

sonar.css.file.suffixes=-

sonar.java.file.suffixes=-

# relative paths to source directories. More details and properties are described

# in https://sonarcloud.io/documentation/project-administration/narrowing-the-focus/

# follow this for code coverage intgration https://daendersby.medium.com/making-sonarcloud-play-nicely-with-jest-fa271f559024

sonar.sources=.

sonar.exclusions=**/__tests__/*.tsx , **/coverage/**/*.js,**/setupTests.ts,**/babel.config.js,**/index.js, **/metro.config.js, **/App.tsx

sonar.language=js,jsx,ts,tsx

sonar.tests=./__tests__

sonar.javascript.lcov.reportPaths=./coverage/lcov.info

sonar.testExecutionReportPaths=./test-report.xml

sonar.sourceEncoding=UTF-8

#sonar.projectName=QalityGate

#sonar.projectVersion=1.0

# Path is relative to the sonar-project.properties file. Replace “\” by “/” on Windows.

#sonar.sources=.

# Encoding of the source code. Default is default system encoding

#sonar.sourceEncoding=UTF-8

Note:

1. By default, it uses Sonar way conditions i.e for quality gate condition you can also set your own conditions, please see the screenshot attached below: This is optional.

2. You can set a different condition for new code to be analyzed.

That's it, Guys ……. Enjoy :D.

If you have any suggestions and questions you’re free to ask and suggest.

Have a great day guys :D.