react-testing

Examples of various approaches and libraries for testing React applications. Written by Zach Schneider for a July 2019 talk at the Cleveland React meetup.

Setup

1. Clone the repository: git clone https://github.com/schneidmaster/react-testing.git

2. Install dependencies: yarn install

3. To run the app locally: start the mock API with yarn api; in a separate terminal, start the React app with yarn start; and visit http://localhost:3000 in your browser

4. To run the tests: yarn test. To open Cypress for running integration tests: yarn cy:open.

Commit walkthrough

I'm generally walking through the commits in order for the talk -- here's a quick guide.

1. 903a9c4 -- implements the app that we'll be testing, a simple todo list
2. 650366e -- adds Enzyme and a suite of example Enzyme tests
3. bb6ef0d -- adds @testing-library/react and a suite of example react-testing-library tests
4. d0013f4 -- refactor one of our app components to be functional instead of class-based, to demonstrate a common footgun with testing implementation details
5. 3edcaa3 -- moving forward with react-testing-library. Removes Enzyme and adds react-testing-library tests for our AddTodo form component, to demonstrate more features of react-testing-library
6. ddd4755 -- refactors AddTodo to use React hooks instead of being class-based; note that the tests require no changes 👍
7. 585f804 -- adds Cypress and an example end-to-end integration test