This repository contains a simple React application of a Calculator and it's history can be used as a guided 'how-to' on the React testing library.
- Run all tests:
npm run test - Run all tests in watch mode:
npm run test:watch - Start development environment:
npm run start
This repository contains a simple application that consists in 3 different screens, where each one will support several points from the key topics to be demonstrated:
- basics
- elementar form testing with use of mocked functions
- prefer userEvent over of fireEvent
- avoid implementation details
- mocking modules
- useContext, render and custom render for tests
- mocking HTTP requests
A brief introduction to the queries provided by [React Testing Library}(https://testing-library.com/docs/react-testing-library/cheatsheet) and the extended assertions of Testing Library is covered in the welcome component. The welcome screen is also used to showcase the usage of mocked functions and a simple way to test forms.
The calculator component is used to show how implementation details can be avoided by going throuh a refactoring that introduces the concepts of display and keyboard from this until this commit.
Having a math "service" available in the calculator is the way found to represent how mocking entire modules can be done.
The calculator is also the place where testing a component created with a context is showncased. The button component has been styled with a dark and light theme and the tests show how that is done.
The goodbye screen is used to wrap up our app. Not only it says a nice farewell to the user, but it also allows us to demostrate how to mock HTTP requests via the icanhazdadjoke api.
Finally, all three screens are connected and the app is put together on your machine. Enjoy!
For comments, questions and suggestions, feel free to contact me!