Add SonarQube integration

.eslintrc.json

@@ -15,7 +15,7 @@
   "parser": "babel-eslint",
   "plugins": ["react", "import", "jsx-a11y", "react-hooks"],
   "parserOptions": {
-    "ecmaVersion": 2018,
+    "ecmaVersion": 2019,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
@@ -30,6 +30,12 @@
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/resolver": {
+      "node": {
+        "paths": ["src"],
+        "extensions": [".js", ".jsx"]
+      }
     }
   }
 }

.gitignore

@@ -9,6 +9,7 @@
 
 # testing
 /coverage
+test-report.xml
 
 # production
 /build
@@ -19,7 +20,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+package-lock.json
\ No newline at end of file

.gitlab-ci.yml

 stages:
+  - lint
   - test
+  - sonar_scanner_test
   - deploy
 
+lint:
+  image: node:latest
+  stage: lint
+  script:
+    - npm install
+    - npm run lint
+
 test:
   image: node:latest
   stage: test
+  artifacts:
+    expire_in: 1 hour
+    paths:
+      - coverage/lcov.info
+      - test-report.xml
   script:
     - npm install
     - npm run test:coverage
 
+sonar_scanner_test:
+  image:
+    name: sonarsource/sonar-scanner-cli:latest
+    entrypoint: [""]
+  stage: sonar_scanner_test
+  dependencies:
+    - test
+  script:
+    - sonar-scanner -Dsonar.projectKey=$SONARQUBE_PROJECT_KEY -Dsonar.host.url=$SONARQUBE_HOST_URL -Dsonar.login=$SONARQUBE_TOKEN -Dsonar.branch.name=$CI_COMMIT_REF_NAME
+
 staging:
   image: node:latest
   stage: deploy
@@ -17,9 +41,9 @@ staging:
     NETLIFY_SITE_ID: $STAGING_NETLIFY_SITE_ID
   script:
     - npm install
-    - CI="false" npm run build
+    - CI=false npm run build
     - npm install netlify-cli -g
-    - netlify deploy --dir "dist" --prod
+    - netlify deploy --dir dist --prod
   only:
     - staging
 

package.json

@@ -13,6 +13,7 @@
     "build": "parcel build public/index.html",
     "test": "jest",
     "test:coverage": "jest --coverage",
+    "lint": "eslint \"src/**/*.{js,jsx}\" --quiet",
     "format": "prettier --write \"src/**/*.{js,jsx}\""
   },
   "eslintConfig": {
@@ -44,6 +45,7 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.3.0",
     "jest": "^25.1.0",
+    "jest-sonar-reporter": "^2.0.0",
     "parcel-bundler": "^1.12.4",
     "prettier": "^1.19.1"
   },
@@ -51,6 +53,7 @@
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
       "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
-    }
+    },
+    "testResultsProcessor": "jest-sonar-reporter"
   }
 }

sonar-project.properties

+sonar.javascript.lcov.reportPaths=coverage/lcov.info
+sonar.test.inclusions=**/*.test.js
+sonar.testExecutionReportPaths=test-report.xml
+sonar.scm.provider=git
+sonar.sourceEncoding=UTF-8
+sonar.sources=src

src/App.jsx

+import React from "react";
+import "./App.css";
+
+const App = () => {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <p>Hello, World!</p>
+      </header>
+    </div>
+  );
+};
+
+export default App;

src/App.test.js

-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "./App";
 
-test('renders hello world', () => {
+test("renders hello world", () => {
   const { getByText } = render(<App />);
   const paragraphElement = getByText(/Hello, World!/i);
-  expect(paragraphElement.textContent).toStrictEqual("Hello, World!");;
+  expect(paragraphElement.textContent).toStrictEqual("Hello, World!");
 });

src/index.js

-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
 
-ReactDOM.render(<App />, document.getElementById('root'));
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+ReactDOM.render(<App />, document.getElementById("root"));