https://github.com/asrieldreemurrgm/jest_testing_study

Practice project to learn and implement unit and integration tests using Jest and React Redux.
https://github.com/asrieldreemurrgm/jest_testing_study

automated-tests frontend-testing html5 integration-tests jest jest-tests mock-service-worker preloaded-state react-redux react-testing test-coverage testing testing-library tests typescript unit-tests

Last synced: 10 months ago
JSON representation

Practice project to learn and implement unit and integration tests using Jest and React Redux.

• Host: GitHub
• URL: https://github.com/asrieldreemurrgm/jest_testing_study
• Owner: AsrielDreemurrGM
• Created: 2025-02-12T20:12:19.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-07-29T18:43:12.000Z (10 months ago)
• Last Synced: 2025-07-29T21:18:42.121Z (10 months ago)
• Topics: automated-tests, frontend-testing, html5, integration-tests, jest, jest-tests, mock-service-worker, preloaded-state, react-redux, react-testing, test-coverage, testing, testing-library, tests, typescript, unit-tests
• Language: TypeScript
• Homepage:
• Size: 396 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Jest Testing Study



  Este README também está disponível em Português.





  A hands-on learning project designed to explore testing practices in React applications using Jest, Testing Library, and React Redux. This includes tests for components, user interactions, alerts, and Redux logic, while integrating tools like Mock Service Worker and code coverage reporting.



🧪 What’s Being Tested



  
React component rendering and interaction;

  
Redux store and dispatched actions using preloadedState;

  
Form behavior and UI events using fireEvent and screen;

  
Alert messages and side effects triggered by components;

  
Mock Service Worker (MSW) for API simulations;

  
Custom render utilities for provider wrapping;

  
Unit tests for utility functions and string operations;

  
Test coverage reports.



⚙️ Technologies Used



  
React

  
Redux Toolkit

  
TypeScript

  
Jest

  
React Testing Library

  
Mock Service Worker (MSW)



📂 Folder Structure



src/

├── components/       # Components with associated tests

├── store/            # Redux setup with preloaded state

├── utils/            # Utility functions and helpers

├── tests/            # Jest test files and helpers

└── App.tsx           # Main application entry



📌 Commit Highlights



  


Render Tests – Created tests for header, product list, and cart items;

  


Redux Store Refactor – Refactored store to support preloadedState and reusable render logic;

  


Mock Service Worker – Integrated MSW to simulate backend API behavior during tests;

  


Coverage Script – Added script to check project coverage;

  


Alert Component Test – Added test to validate product alert logic.



📝 Notes



  
This project is for study and practice purposes only;

  
Code is written with readability and test clarity in mind;

  
Jest is used with TypeScript and configured for React DOM testing;

  
Comments are added throughout to explain testing logic.