{"id":21050767,"url":"https://github.com/jamal-saadeddin/react-testing-library-msw-training","last_synced_at":"2026-05-20T06:32:03.010Z","repository":{"id":247932041,"uuid":"826965598","full_name":"Jamal-SaadEddin/React-Testing-Library-MSW-Training","owner":"Jamal-SaadEddin","description":"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.","archived":false,"fork":false,"pushed_at":"2024-07-11T09:31:18.000Z","size":1254,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-20T18:35:27.940Z","etag":null,"topics":["jest-tests","mock-server","msw","react","react-testing-library","unit-testing"],"latest_commit_sha":null,"homepage":"https://jamal-saadeddin.github.io/React-Testing-Library-MSW-Training/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jamal-SaadEddin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-10T18:30:21.000Z","updated_at":"2024-07-11T09:31:22.000Z","dependencies_parsed_at":"2024-07-11T12:11:38.896Z","dependency_job_id":null,"html_url":"https://github.com/Jamal-SaadEddin/React-Testing-Library-MSW-Training","commit_stats":null,"previous_names":["jamal-saadeddin/react-testing-library-msw-training"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jamal-SaadEddin%2FReact-Testing-Library-MSW-Training","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jamal-SaadEddin%2FReact-Testing-Library-MSW-Training/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jamal-SaadEddin%2FReact-Testing-Library-MSW-Training/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jamal-SaadEddin%2FReact-Testing-Library-MSW-Training/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jamal-SaadEddin","download_url":"https://codeload.github.com/Jamal-SaadEddin/React-Testing-Library-MSW-Training/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243495496,"owners_count":20299923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest-tests","mock-server","msw","react","react-testing-library","unit-testing"],"created_at":"2024-11-19T15:47:42.092Z","updated_at":"2026-05-20T06:31:57.964Z","avatar_url":"https://github.com/Jamal-SaadEddin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Testing-Library-MSW-Training\n\nThis 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. \n\nThe 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.\n\n\n## Overview\n\nThe 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.\n\n## Technologies Used\n\n- **React**: A JavaScript library for building user interfaces.\n- **React Testing Library**: A library for testing React components.\n- **Mock Service Worker (MSW)**: A library for mocking API requests.\n- **Jest**: A delightful JavaScript Testing Framework with a focus on simplicity.\n- **Node.js**: JavaScript runtime built on Chrome's V8 JavaScript engine.\n\n## How to Run the Project Locally\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/Jamal-SaadEddin/React-Testing-Library-MSW-Training.git\n   cd React-Testing-Library-MSW-Training\n   ```\n\n2. **Install the dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Run the project**:\n   ```bash\n   npm start\n   ```\n\n4. **Run the tests**:\n   ```bash\n   npm test\n   ```\n\n   To run tests with coverage:\n   ```bash\n   npm test -- --coverage\n   ```\n\n## Testing Details\n\n### Validation Tests\n\n- **Invalid Email**: Checks for validation errors when an invalid email is entered.\n- **Short Password**: Checks for validation errors when a short password is entered.\n- **Successful Sign-up**: Verifies the success message on a successful sign-up.\n- **Sign-up Failure**: Verifies the error message on a sign-up failure.\n\n### Form Interaction Tests\n\n- **Enable Sign Up Button**: Ensures the Sign Up button is enabled when the form is valid.\n- **Disable Sign Up Button**: Ensures the Sign Up button is disabled when the form is invalid.\n- **Update Form Fields**: Verifies that form fields update correctly on user input.\n- **Redirect on Successful Sign-up**: Checks that the user is redirected to the home page after a successful sign-up.\n\n## Demo\n\nYou can check out a live demo of the project [here](https://jamal-saadeddin.github.io/React-Testing-Library-MSW-Training/).\n\n## Conclusion\n\nThis 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.\n\n## Acknowledgements\n- This task is part of the Foothill Technology Solutions Internship Cycle.\n- Big thanks to my trainer [@Huthaifa](https://github.com/Huthaifa-Dev)\n- Big thanks to my trainer [@Mahmoud](https://github.com/MahmoudAbdAlKareem)\n\u003cimg src=\"https://github.com/Jamal-SaadEddin/TodoTick/assets/104212352/9d3c83b0-5ea8-46ff-93e8-f1504af9dc67\" width=\"400\" alt=\"foothill logo\"\u003e\n\n\n---\n\nThank you for visiting my project! Feel free to star or contribute to the repository if you find it useful.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamal-saadeddin%2Freact-testing-library-msw-training","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamal-saadeddin%2Freact-testing-library-msw-training","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamal-saadeddin%2Freact-testing-library-msw-training/lists"}