Learning react-testing-library

Just one of the things I'm learning. https://github.com/hchiam/learning

react-testing-library focuses on best-practices by testing the DOM and what users with interact with, INSTEAD of React state/props/components, which can change (otherwise use data-testids for robust tests). It works well with jest and is great for unit tests and integration tests, but end-to-end testing may be better left to cypress with @testing-library/cypress.

BTW:

• unit tests = isolated functions
• integration tests = functions that rely on other functions (such as network calls or functions you have access to, but also functions that you may not have access to, like with mocks for fast and reliable integration tests)
• end-to-end tests = UI interaction tests

https://github.com/testing-library/react-testing-library

https://testing-library.com/docs/react-testing-library/intro

https://www.youtube.com/watch?v=JKOwJUM4_RM

https://raw.githubusercontent.com/testing-library/react-testing-library/master/other/cheat-sheet.pdf

https://testing-playground.com

From scratch

Using yarn:

yarn add react react-dom
yarn add --dev @testing-library/react @testing-library/jest-dom @babel/preset-react @babel/preset-env babel-jest jest-cli;

Or with npm:

npm install react react-dom
npm install --save-dev @testing-library/react @testing-library/jest-dom @babel/preset-react @babel/preset-env babel-jest jest-cli

And then:

touch babel.config.js # and fill in this file
jest

Starting by testing out this repo

Using yarn: (triple-click to select all)

git clone https://github.com/hchiam/learning-react-testing-library.git && cd learning-react-testing-library && yarn && jest

Or with npm: (triple-click to select all)

git clone https://github.com/hchiam/learning-react-testing-library.git && cd learning-react-testing-library && npm install && jest