DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Raghavendra NK
Raghavendra NK

Posted on

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.

image

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. image

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.
image

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

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

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

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

  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.
image

5.2 Call this theme in .storybook/manager.js
image

5.3 Update package.json with storybook commands.
image

  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
imageLink

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.
image

Then specify the path in jest.config.json
image

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

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

  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.
image

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.
image

  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”
    image

    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:
image
image

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.