TDD: Adding unit testing, Jest to an existing React project part 1: installing

TDD

Have you ever coded in a Test-Driven Development Environment, such as leetcode or coding bootcamp school problems? Then you have coded in the TDD environment. TDD is a software development methodology, in which the developer writes code in very short cycles, starting with a failing test, making the code pass the test, then refactoring the code.

Unit testing is a software testing where individual units or components of a software are tested. A unit is the smallest testable part of any software. The purpose of unit testing is to validate that each unit of the software performs as it supposed to. Instead of testing the whole project, it’s smarter, saves memory and time to only test parts so it’s useful when it comes to refactoring or re-writing a piece of code. Without unit test, it’s often hard to ensure what you broke.

Jest was created by Facebook engineers for its React project. It also works with projects using Babel, TypeScript, Node, React, Angular, Vue and more. So if you want to test your react project, it makes perfect sense to use Jest instead of other testing tools.

Testing React Apps · Jest

In order to add Jest to your existing React project, you need to install Jest using below command. If you don’t have an existing React project, you can Create React App.

It is recommended that stick with one JS package manager. If you used npm, you should continue to use npm. If you used yarn, then you should stick with yarn. It may not show any problems on the local host but I personally experienced that code breaks when it gets deployed on netlify.

Install Jest using npm:

npm install --save-dev jest babel-jest babel-preset-es2015 babel-preset-react react-test-renderer

Install Jest using yarn:

yarn add --dev jest babel-jest @babel/preset-env @babel/preset-react react-test-renderer

Your package.json file should have below dependencies and devDependencies.

// package.json
   "dependencies": {
     "react": "<current-version>",
     "react-dom": "<current-version>"
   },
   "devDependencies": {
     "@babel/preset-env": "<current-version>",
     "@babel/preset-react": "<current-version>",
     "babel-jest": "<current-version>",
     "jest": "<current-version>",
     "react-test-renderer": "<current-version>"
   },
   "scripts": {
     "test": "jest"
   }

Then create a new file called babel.config.js with below code to configure to use any presents and plugins you need.

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

Now you should be good to go! Great job installing Jest. :-D

So what and how do we test now? First we need to create a folder called `__tests__` We will store all the testing files in this folder. It’s a popular convention in the JS community. Read more about how to add testing file below.

Adding unit testing, Jest to an existing React project part 2: testing

In order to test, we will use these four files.

App.js
ComponentName.js (for this example, we will call it Button.js)
ComponentName.test.js (ex: Button.test.js)
componentName.css(ex: button.css)

We will test these.

1. render the component correctly
2. render the component's prop correctly

First let’s look at App.js

//App.js
import React from 'react';
import Button from './Button.js';
function App(){
      return (
           <div>
             <Button label = "click me please" ></Button>
</div>
)
}
export default App;

We will pass label props’s text content as, “click me please” to Button.js.

//Button.js 
import react from 'react';
import './button.css';
function Button({label}){
return <div data-testid="button" className = "button-style">
hi {label}
</div>
}
export default Button

next to className in the div tag, write data-testid.First of all, `data` is a special attribute in html as a tag. Also if className changes, the test would fail. So in order to prevent that, we can create a separate div tag for test.

For className, we will test style as well so we will call it button-style and import `button.css` and create button.css file to style the component.

//button.css
.button-style{
     border: 100 px solid pink;
padding: 10px;
}

Read more how to write testing file on part 2.

https://greemjellyfish.medium.com/tutorial-adding-unit-testing-jest-to-an-existing-react-project-part-2-testing-5ba93438a6b0