learning-zone / react-unit-testing

React Unit Testing

React Unit Testing using Jest

Click ★ if you like the project. Your contributions are heartily ♡ welcome.

Installation

# Package Installation
npm install

# Run the Project
npm start

# Project Test
npm test

# Generate Code Coverage Report
npm run test -- --coverage --watchAll=false

↥ back to top

Project Covers

• Component Testing
• Props Testing
• Snapshot Testing
• Event Testing
• Mocking function
• Rest API Testing

↥ back to top

Folder Structure

 + src
   + components
     + Events
	   + __snapshots__
	   - Events.js  
	   - Events.test.js
	 + Header
	   - Header.js
	   - Header.test.js
	 + Props
	   - Props.js
	   - Props.test.js
	 + RestAPI
	   - RestAPI.js
	   - RestAPI.test.js
   + __mocks__
     - axios.js

↥ back to top

Code Coverage Report

|File                    |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
|------------------------|----------|----------|----------|----------|-------------------|
|All files               |    88.89 |        0 |       75 |    88.24 |                   |
| src                    |      100 |      100 |      100 |      100 |                   |
|  App.js                |      100 |      100 |      100 |      100 |                   |
| src/Components/Events  |       50 |        0 |    33.33 |       50 |                   |
|  Events.js             |       50 |        0 |    33.33 |       50 |             14,16 |
| src/Components/Header  |      100 |      100 |      100 |      100 |                   |
|  Header.js             |      100 |      100 |      100 |      100 |                   |
| src/Components/Props   |      100 |      100 |      100 |      100 |                   |
|  Props.js              |      100 |      100 |      100 |      100 |                   |
| src/Components/RestAPI |      100 |      100 |       80 |      100 |                   |
|  RestAPI.js            |      100 |      100 |       80 |      100 |                   |
|------------------------|----------|----------|----------|----------|-------------------|

↥ back to top

Technology

• React
• Jest
• Material-UI
• Axios
• React Testing Library

↥ back to top