React Testing Library tests React components through user-visible behavior rather than implementation details. It serves as a black-box component-testing framework, commonly paired with Vitest for automated regression checks. Its approach complements manual testing by repeatedly exercising interaction scenarios that are easy to forget. section 10.0
A standard Vite setup requires four integration steps:
- Install Vitest, jsdom, @testing-library/react, and @testing-library/jest-dom as development dependencies. section 10.1.1
- Configure ESLint to recognize Vitest globals in .test.js and .test.jsx files. section 10.1.1
- Set Vitest to use jsdom through Vite configuration. section 10.1.1
- Add npm scripts for watch-mode testing and one-time runs with vitest run. section 10.1.1
Menu-item test run
A MenuItem test verifies that the component renders a link in a list item. Running npm test launches Vitest, reports one passing test, and remains in watch mode; adding the run argument performs a one-time execution. section 10.1.1
$ npm -w ch10/menuitem install --save-dev vitest jsdom @testing-library/react @testing-library/jest-dom
Inspect the dependency installation command for the Vite and React Testing Library test setup. section 10.1.1
