React | Typescript | Jest | Cypress - application boilerplate

It's a template for React application with Typescript, Jest library and other stuff that can be helpful for you - feel free to use it!

• React | Typescript | Jest | Cypress - application boilerplate
  • Instalation steps
  • Available scripts
  • Technology stack
  • Useful information

Instalation steps

1. Clone this repository to destination folder.

git clone https://github.com/rkoziol/react-typescript-jest-boilerplate.git

2. Install dependencies.

npm install

3. Run local environment.

npm start

Available scripts

npm start - run development server with hot reload mode,

npm build - build distributon package,

npm run lint - run lints,

npm run lint:code - run lint for typescript / javascript files,

npm run lint:code:fix - run lint for typescript / javascript files with auto fix option,

npm run lint:style - run lint for style files,

npm run lint:style:fix - run lint for style files with auto fix option,

npm run test:jest - run Jest tests,

npm run test:jest:watch - run Jest tests with watch mode,

npm run test:jest:coverage - run Jest tests and generate coverage report,

npm run test:cypress - run Cypress tests in terminal,

npm run test:cypress:open - open Cypress application.

Technology stack

	Name	Version	Docs
	Typescript	5.5.4	https://www.typescriptlang.org/
	React	18.3.1	https://reactjs.org/
	React Router Dom	6.25.1	https://v5.reactrouter.com/web/guides/quick-start
	Jest	29.7.0	https://jestjs.io/
	Cypress	13.13.1	https://www.cypress.io/
	Sass	1.77.8	https://sass-lang.com/
	Webpack	5.93.0	https://webpack.js.org/
	ESLint	8.57.0	https://eslint.org/
	Prettier	3.3.3	https://prettier.io/
	Husky	9.1.4	https://github.com/typicode/husky

Useful information

I focused on separate logic from presentation layer of component, so components are created according to this scheme:

• index.tsx - main file with component declaration. You can put here a React Hooks features (eg.: useState, useEffects etc.), prepare component props, do some base logic etc. This file should return component view layer with component props set.
• Component.tsx - file with view layer of component.
• Component.scss - file with component style declaration.
• handlers.ts - file where You can place useful function for component.

Before You commit or push something on repository, Husky will run code lints and tests. The configuration files are in the main project folder.