---
# System prepended metadata

title: React Testing
tags: [Technical Concepts]

---

# React Testing

## 1. Testing

- What is testing ? 
    +, A process that is used to obtain the information about the quality of a product 
    +, An assessment of a product or system
    +, Testing is one of the quality control techniques

- Benefit of testing: 
    +, Improve communication between analyst, developer and tester
    +, Provide data on the quality of a system to track progress and requirements
    +, Ensure the quality of the product that can be delivered to the customer

## 2. Testing Pyramid

- Testing pyramid is an presentational chart that groups testing into different levels

- Explanation: https://www.youtube.com/watch?v=Re4anDcHSwA&ab_channel=InterviewDOT

![](https://i.imgur.com/NCsFlH3.png)

**(1) Unit Test:** these test are written at the individual function or module level, to make sure each individual of the system component works as expected

**(2) Component Test:** these test verify that different component of the system works correctly when combined together. These are test at a higher level of abstraction than Unit Test. 

For example, consider a system that has several components: a database, a web service, and a user interface. A component test for this system might test that the web service correctly retrieves data from the database and that the user interface correctly displays the data

**(3) Integration Test:** these tests, like component test, verify that different components of hte system work correctly when integrated with each other. Here are the differences:

+, Component Test are design to detect internal issue of a component. 

+, Integration Test are designed to detect issue of the intergration between different components

**(4) API Test:** API tests verify that the APIs of a system are functioning correctly and that they produce the expected responses

**(5) Functional tests:** These tests verify that the system works correctly from a user's perspective, by testing individual user-facing features and scenarios

***, BONUS:** End-to-end tests: These are tests that simulate real-world user scenarios and test the system from start to finish, from a user's perspective.

Differences: End-to-end tests are designed to catch issues that may arise from the interactions between different components of a system, while functional tests are designed to catch issues with the internal functionality of individual functions or features

## 3. Black Box and White Box Testing

- Black Box Testing: 
    +, Is when a tester doesn't know how the system works
    +, Focuses on the functionality of a system and the inputs and outputs

- White Box Testing: 
    +, Is when the tester has a high level of knowledge about the system, including its source code
    +, This type of testing is often used for unit testing and integration testing
    +, Tester focuses on the internal structure and implementation of the system
    
## 4. Practical Information: 

**a. What to test ?**

- We shoudn't test everything because it is time consuming and not effective to do so
- Here are a list of priority of what you should test: 
    - 1. High value feature
    - 2. Edge cases in high value feature
    - 3. Things that are easy to break
    - 4. Basic component test: 
        +, User interaction
        +, Conditional rendering
        +, Utils / Hooks

----

# SEE EPAM LEARNING FOLDER FOR THIS GUIDE

# I. Step to run jest for testing in your existing folder:

## Step 1: install dependencies

- Run the command down below:
  $ npm install --save-dev jest @testing-library/react @testing-library/jest-dom

  $ jest-css-modules-transform jest-image-snapshot

## Step 2: create a jest.config.js in the root folder

include this:

```
module.exports = {
    testEnvironment: "jsdom",
    moduleNameMapper: {
        "^.+\\.(css|less|scss)$": "jest-css-modules-transform",
        "\\.(png|jpg|gif|ttf|eot|svg)$": "jest-image-snapshot",
    },
};
```

NOTE: jest cannot render css or sass so I have to configure it in the
moduleNameMapper above. If you have a scss module file, you will need
to convert it into a css module file for the test to work.

CSS module cannot use @import, so all the value will have to be imported manually or import from a css root variable

Question: how to get jest to render sass module in a component ?

## Step 3: include this in your package.json

```
"jest": {
    "testEnvironment": "jsdom"
}
```

and under script in package.json, include this:

`"test": "jest --config ./jest.config.js",`

## Step 4: create a .babelrc file in your root folder and put this in

```
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
```

## Step 5: test folder

- In the src folder, create a test folder and provide test file in there

## Step 6: run the test

- Write the code
- Run the test by running this command:
  $ npm test

# II. End-to-end testing with cypress:

Follow this blog:

https://viblo.asia/p/e2e-testing-cho-ung-dung-reactjs-su-dung-cypress-W13VM71QJY7

and see folder: react-testing/demo-cypress