Learn How To Test React Applications (Testing React Applications with Jest and React Testing Library)

How to test react applications with jest and react testing library. Image courtesy of morioh.com

TL;DR:

A Jest and React Testing Library Test Anatomy Example
npx create-react-app react_jest_react_testing_library #npx is an npm package runner that ships with npm
cd react_jest_react_testing_library
code . #for vscode
yarn add --dev @testing-library/react @testing-library/jest-dom 
setup custom jest extensions with react testing library
yarn test
successful tests for the default create-react-app template
successful tests for the default create-react-app template
Track logged in state and update displayed info accordingly. Also generate random Quotes
Toggle content depending on the logged in and logged out states
Toggle content depending on the logged in and logged out states
Custom react hook to fake network calls for logging in and out.
Return one of eleven quotes randomly
yarn add jest-environment-jsdom-sixteen --dev && yarn add --dev @testing-library/react @testing-library/jest-dom
“test”: “react-scripts test — env=jest-environment-jsdom-sixteen”,
Test cases
yarn test
Passing Tests

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store