markSteph / react-testing-techniques

React testing Techniques

React Testing Techniques

This project implements an online shopping application to show techniques used to test React applications. We use the following tools for testing:

Unit Testing

• Jest - a testing framework designed to ensure correctness of any JavaScript or TypeScript codebase

• React Testing Library - a testing framework for React components that encourages better testing practices

• Mock Service Worker - a framework to mock APIs by intercepting requests at the network level. It allows us to reuse the same mock definition for testing, development, and debugging.

Integration Testing

• Cypress - a testing framework for fully built Web applications running in a browser

Manual Testing

• Storybook - a tool that helps build components in isolation and record their states as stories. Stories make it easy to explore a component in all its permutations no matter how complex. They also serve as excellent visual test cases. Storybook testing can also be automated. For details, look at the Storybook documentation.

This project was bootstrapped with React Accelerate.

Testing Topics

• Structuring code for easier testing - pure JavaScript logic vs. React components
• Snapshot testing vs. traditional unit testing
• Suppressing console errors
• Checking for existence of an element
• Waiting for removal of an element
• Waiting for something to happen
• User events (note how {selectall} works)
• Mocking a callback (see ProductView test)
• Use MSW instead of excessive mocking
• Overriding MSW handlers (see CartView test)
• Mocking MSW handlers (see CatalogView test)
• Difference between queryBy, getBy and findBy
• Testing for page navigation

Getting Started

Note: If you prefer to use npm, please feel free to replace the yarn commands in this section with equivalent npm commands.

Make sure your development machine is set up for building React apps. See the recommended setup procedure here.

Execute the following commands to install dependencies:

yarn install

Execute the following commands to run the app:

yarn start

Now point your browser to http://localhost:3000/.

Running Unit Tests

Execute one of the following command to run unit tests.

yarn test # interactive mode

# OR

yarn test:coverage # non-interactive mode with coverage information

Running End-to-End Tests

yarn start # starts a local server hosting your react app

# in a difference shell, run cypress
yarn cypress:open

Running Storybook

yarn storybook

Screenshots

Home page with item catalog and shopping cart