# 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


**(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