ReactApp Typescript with TDD and BDD(jest, Enzyme, Sinon, and cypress), linting and pre-commit hooks(using husky) [Part-1]

Hi all, from this material we are going to create a sample react app from scratch, which will include the concepts from setting up a proper project with TDD and BDD approach along with linting.

New to React? Please check Basics to get to know the basics.

In this Part-1 we are going to use the below libraries and tools to set up our project.

• React
• For E2E testing will use Cypress, Jest, Enzyme, Sinon, and Istanbul for code coverage
• We will use Typescript to follow OOPS concepts like enums, interface, types, etc.,
• Storybook to document components for reuse and automatically visually test components. To maintain code quality will use ESLint, Prettier, and SassLint.
• And will call these e2e tests and linting rules in the pre-commit hook using husky, so before the developer wants to push his changes to the repository they can fix the coding standard errors, and make better code.

So let's start with setting up the project by following below steps:

1. Create a react app using create-react-app with template typescript, later we will eject it to follow our standards. “npx create-react-app react-typescript-jest-cypress — template typescript”
2. Now run the “npm run eject” to eject and segregate the dependencies and devDependencies like mentioned in package.json
3. We will use Sass in our application so we can use variables, mixins, nested rules and functions to make well-organized and theming across the projects. To install sass package run “npm install node-sass -D”
4. Now we will install and use cypress for E2E tesing with cross-browser compatibility, so we can see visually the flow, debug and fix the bugs. “npm install cypress -D”. Update the package.json with cypress test commands.

Now let's run cypress, using “cypress-test” command.

Note: Some of you can face issues in some versions: Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are “development”, “test”, and “production”. Instead, received: undefined. When the app is created using create-react-app. To overcome this issue go to package.json and remove the below code snippet.

And update the cypress.json file in the root folder like below:

Now we will use package @cypress/code-coverage for code-coverage.
4.1 Update babelrc like below and install the required packages

4.2 Update the cypress/plugins/index.js file:

4.3 Add the code-coverage summary commands in the package.json scripts section.

1. Lets install storybook by running “npx sb init”. Once it got installed we will customize it like below.

5.1 Create theme.js in the .storybook folder where you can mention the title, theme, and brandURL.

5.2 Call this theme in .storybook/manager.js

5.3 Update package.json with storybook commands.

1. We will configure our unit testing with jest, enzyme, sinon and chai tools.

6.1 For snapshot testing we are going to use react-test-renderer, so let's install it “npm install react-test-renderer -D”
6.2 We will configure jest.

6.2.1 Create a jest.config.json in the root folder and specify the options
Link

6.2.2 Now we will install enzyme, adapter, sinon and chai. “npm install enzyme @types/enzyme sinon @types/sinon chai @types/chai enzyme-adapter-react-17-updated -D”

6.2.3 Create a file setupTests.js in root folder for specifying enzyme adapter.

Then specify the path in jest.config.json

1. We will use istanbul for code coverage and set some threshold in jest.config.json to maintain quality of code
   
   

2. Prettier: Will use this for code formatting by creating .prettierrc.json in root folder. And install package “npm install prettier -D”
   

3. Will use “husky” as our pre-commit hook and we will specify the commands which are to be executed when the developers commits the code, if all rules are getting passed will allow him to push to the repository. “npm install -D pretty-quick husky”

9.1 To add any commands run “npx husky add .husky/pre-commit ” to update .husky file.

So by doing this whenever the developer tries to commit the changes it will check and give the status of it by that developer can fix the issues if any.

1. Linting: will use to analyse code for potential errors
   10.1 Scss-Lint: Create a .sasslintrc.json in the root folder and specify the sass rules, and call it in the package.json. “npm install scss-lint sass-lint-auto-fix -D”
   

   10.2 Typescript-ESlint: Install “npm i -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin” then create a .eslintrc.js and .eslintignore in root folder. eslintignore will ignore the paths/files from linting.

Finally, update the .husky file with the below commands:

So now we are ready with the proper project setup, in the next part, we will dockerize it along with CI/CD pipeline using Docker and Jenkins.

Part -2: Contains the Docker containers for MongoDB, NodeJS API, and ReactAPP using Docker-Compose. Along with NVM.
Part-3: Contains setup “i18next and redux, saga” and “axios” configurations. And also we are going to use Figma to create our wireframes, which we are going to develop.
Part-4: Contains Jenkins setup and connecting with nodeJS API with MongoDB to get the articles from the database and performing the CRUD operations.
Part-5: We will publish our app on the Heroku server using ci/cd pipelines.
Please find here the complete project setup & Storybook with core component package: Link