initialization.md

Initialization

This starter has been initialized with Vite which is a build tool that aims to provide a faster and leaner development experience for modern web projects. (And more precisely react-ts template).

Vite, React, Typescript

npm create vite@latest APPLICATION_NAME -- --template react-ts

Linters

Then, we installed ESLint & Prettier with react and typescript configuration.
You can find here how to do that.

Jest

To make Jest works we need babel to compile files. Furthermore, we use jest-sonar-reporter to create sonar reports.

npm install -D jest babel-jest jest-environment-jsdom jest-sonar-reporter identity-obj-proxy

We use identity-obj-proxy to intercept style files, fileMock to intercept other files we doesn't matter in tests, jest-environment-jsdom to emulate browser dom.

Our Jest configuration (in package.json):

{
  "verbose": true,
  "testEnvironment": "jsdom",
  "testResultsProcessor": "jest-sonar-reporter",
  "transformIgnorePatterns": ["/node_modules/(?!nanoid)(.*)"],
  "moduleNameMapper": {
    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/../fileMock.js",
    "\\.(css|less|scss)$": "identity-obj-proxy"
  }
}

Our Babel configuration (in babel.config.json):

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript',
    ['@babel/preset-react', { runtime: 'automatic' }]
  ]
};

Testing library

We use testing library to test component by simulate user behavior.

npm install -D jest @testing-library/react @testing-library/jest-dom

React Query

We use React Query to make calls. It could be local files put in public directory or APIs.

npm i @tanstack/react-query
npm i -D @tanstack/react-query-devtools

React router dom

We use React router dom, for routing.

npm install react-router-dom@6