https://github.com/mahmoudahmadosman/react-jest-testing

https://github.com/mahmoudahmadosman/react-jest-testing

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/mahmoudahmadosman/react-jest-testing
• Owner: MahmoudAhmadOsman
• Created: 2023-09-02T20:04:50.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-13T15:37:59.000Z (9 months ago)
• Last Synced: 2024-04-13T22:46:55.306Z (7 months ago)
• Language: JavaScript
• Homepage: https://react-jest-testing.vercel.app
• Size: 529 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Testing Application

This React JS application is designed for testing purposes. It utilizes Jest, a JavaScript testing framework, along with React's @testing-library/user-event, to enable thorough and efficient testing.

## Testing Components

In this application, I focus on testing two key components:

### UserForm.js

This component is responsible for user input and interaction. I thoroughly test it using various Jest functions and techniques, including but not limited to:

- `getByRole`: To access and interact with elements by their role.

- `jest.fn()`: To create mock functions and track their usage.

- `toHaveBeenCalled`: To ensure that specific functions have been called.

- `toHaveBeenCalledWith`: To check if functions were called with the expected arguments.

### UserList

The UserList component displays a list of users. I conduct comprehensive testing on this component as well, applying similar Jest testing methods.

## Conclusion

This React application serves as a practical example of how to employ Jest and @testing-library/user-event for testing React components. By thoroughly testing UserForm.js and UserList, I ensure the reliability and functionality of these essential parts of the application. This approach helps maintain code quality and provides confidence in the application's behavior.