Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamal-saadeddin/react-testing-library-msw-training
A project created during my Frontend internship at Foothill Technology Solutions to practice and learn React Testing Library and Mock Service Worker (MSW) by writing unit tests for a SignUp component.
https://github.com/jamal-saadeddin/react-testing-library-msw-training
jest-tests mock-server msw react react-testing-library unit-testing
Last synced: about 2 months ago
JSON representation
A project created during my Frontend internship at Foothill Technology Solutions to practice and learn React Testing Library and Mock Service Worker (MSW) by writing unit tests for a SignUp component.
- Host: GitHub
- URL: https://github.com/jamal-saadeddin/react-testing-library-msw-training
- Owner: Jamal-SaadEddin
- Created: 2024-07-10T18:30:21.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-07-11T09:31:18.000Z (6 months ago)
- Last Synced: 2024-07-11T11:53:59.194Z (6 months ago)
- Topics: jest-tests, mock-server, msw, react, react-testing-library, unit-testing
- Language: TypeScript
- Homepage: https://jamal-saadeddin.github.io/React-Testing-Library-MSW-Training/
- Size: 1.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React-Testing-Library-MSW-Training
This repository contains the React Testing Task assigned during my Frontend internship at Foothill Technology Solutions. The primary objective of this task is to learn and practice React Testing Library and Mock Service Worker (MSW) for testing React components.
The task was prepared by [Mahmoud Abd Al Kareem here](https://github.com/MahmoudAbdAlKareem/react-testing-library-msw-training) and was forked from this repository. The React project was already set up; I focused on writing tests in my own forked repo.
## Overview
The task focuses on creating and running unit tests for the `SignUp` component. The tests cover various aspects of the component, including validation, form interaction, and API responses. Each test case has been committed separately to track progress and improvements.
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **React Testing Library**: A library for testing React components.
- **Mock Service Worker (MSW)**: A library for mocking API requests.
- **Jest**: A delightful JavaScript Testing Framework with a focus on simplicity.
- **Node.js**: JavaScript runtime built on Chrome's V8 JavaScript engine.
## How to Run the Project Locally
1. **Clone the repository**:
```bash
git clone https://github.com/Jamal-SaadEddin/React-Testing-Library-MSW-Training.git
cd React-Testing-Library-MSW-Training
```
2. **Install the dependencies**:
```bash
npm install
```
3. **Run the project**:
```bash
npm start
```
4. **Run the tests**:
```bash
npm test
```
To run tests with coverage:
```bash
npm test -- --coverage
```
## Testing Details
### Validation Tests
- **Invalid Email**: Checks for validation errors when an invalid email is entered.
- **Short Password**: Checks for validation errors when a short password is entered.
- **Successful Sign-up**: Verifies the success message on a successful sign-up.
- **Sign-up Failure**: Verifies the error message on a sign-up failure.
### Form Interaction Tests
- **Enable Sign Up Button**: Ensures the Sign Up button is enabled when the form is valid.
- **Disable Sign Up Button**: Ensures the Sign Up button is disabled when the form is invalid.
- **Update Form Fields**: Verifies that form fields update correctly on user input.
- **Redirect on Successful Sign-up**: Checks that the user is redirected to the home page after a successful sign-up.
## Demo
You can check out a live demo of the project [here](https://jamal-saadeddin.github.io/React-Testing-Library-MSW-Training/).
## Conclusion
This project has been an excellent opportunity to delve into React Testing Library and MSW, reinforcing best practices in testing and providing hands-on experience with essential tools and methodologies in React application development.
## Acknowledgements
- This task is part of the Foothill Technology Solutions Internship Cycle.
- Big thanks to my trainer [@Huthaifa](https://github.com/Huthaifa-Dev)
- Big thanks to my trainer [@Mahmoud](https://github.com/MahmoudAbdAlKareem)
---
Thank you for visiting my project! Feel free to star or contribute to the repository if you find it useful.