https://github.com/mikeheddes/react-testing-demo
How to test your React App with Jest
https://github.com/mikeheddes/react-testing-demo
enzyme jest react react-test-renderer testing
Last synced: 10 months ago
JSON representation
How to test your React App with Jest
- Host: GitHub
- URL: https://github.com/mikeheddes/react-testing-demo
- Owner: mikeheddes
- License: mit
- Created: 2018-10-30T16:02:50.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-11T12:22:47.000Z (about 7 years ago)
- Last Synced: 2025-03-18T17:56:40.306Z (10 months ago)
- Topics: enzyme, jest, react, react-test-renderer, testing
- Language: JavaScript
- Homepage: http://mikeheddes.github.io/react-testing-demo
- Size: 1000 KB
- Stars: 16
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Testing your React App with Jest 🃏
The following scenarios will be covered:
### Basic
1. Test an interaction with a DOM element that updates state. [[`Counter`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/Counter.test.jsx)]
1. Test a component wrapped in a [HOC](https://reactjs.org/docs/higher-order-components.html) (e.g. [Redux](https://redux.js.org/)' mapState). [[`ScreenWidth`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/ScreenWidth.test.jsx), [`PageURL`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/PageURL.test.jsx)]
1. Create [snapshots](https://jestjs.io/docs/en/snapshot-testing) for the above. [[`All component tests`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components)]
### Advanced
4. Test a component that is wrapped in the [React context](https://reactjs.org/docs/context.html). [[`PageURL`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/PageURL.test.jsx)]
1. Test a [React ref](https://reactjs.org/docs/refs-and-the-dom.html) attached to a DOM node. [[`Reminder`](https://github.com/mikeheddes/react-testing-demo/blob/test-solutions/src/components/Reminder.test.jsx)]
1. Test code that uses browser global variables. [[`ScreenWidth`](https://github.com/mikeheddes/react-testing-demo/blob/master/src/components/ScreenWidth.test.jsx)]
### Project structure
The components and tests are in [`./src/components`](https://github.com/mikeheddes/react-testing-demo/tree/master/src/components).
The tests for `Component.jsx` are in `Component.test.jsx`.
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### `npm test`
Runs the tests in watch mode.
### `npm run test:watch`
Runs the tests in watch mode and shows the test coverage.