front-end-testing-notes.md

React Testing Library notes

• Intro

Queries

• getByTestId, or which query should I use?
• query cheatsheet
• API reference for all queries

Assertions and custom matchers

• regular old jest matchers: https://jestjs.io/docs/en/expect#expectvalue
• jest-dom custom matchers: https://github.com/gnapse/jest-dom#custom-matchers
• footguns like toContainHTML: https://github.com/gnapse/jest-dom#tocontainhtml

Appearance and disappearance 👻

• https://testing-library.com/docs/guide-disappearance

Firing events

• firing events
  • full list of dom-testing-library events
• input event
• user-event
• can't test styles on hover (github issues)

Developer workflow

• While developing, run npm run test -- -f ${componentName} --watch
  • Tests re-run on save = instant feedback
• When we want to view more in-depth coverage reports, run npm run test (need to overwrite partial coverage that's generated when watching a single file)
  • .artifacts > coverage > lcov-report > index.html > right click file > "View in Finder" > drag file to open browser window That will give you a view like this: If you click into an individual component like Button > index.js, you can see exactly which branches are being tested