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]
2. Test a component wrapped in a HOC (e.g. Redux' mapState). [ScreenWidth, PageURL]
3. Create snapshots for the above. [All component tests]

Advanced

4. Test a component that is wrapped in the React context. [PageURL]
5. Test a React ref attached to a DOM node. [Reminder]
6. Test code that uses browser global variables. [ScreenWidth]

Project structure

The components and tests are in ./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 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.