testing-rtl.mdc 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940
  1. ---
  2. description: Frontend testing with React Testing Library best practices.
  3. globs: ["**/*.test.ts", "**/*.test.tsx", "jest.config.*"]
  4. alwaysApply: false
  5. ---
  6. # Testing Rules
  7. - Use **React Testing Library**; prefer `user-event` over `fireEvent`.
  8. - Test primary flows, edge cases, and a11y roles/labels.
  9. - Avoid implementation details; assert on behavior and DOM.
  10. - prefer role/name queries, e.g. getByRole; avoid brittle hardcoded strings if translated.
  11. - Use the component name in the describe and use "it" over "test" for better readbility.
  12. ## Example
  13. ```ts
  14. describe('MyComponent', () => {
  15. it('renders calls action when clicked', () => {
  16. const user = userEvent.setup();
  17. render(<Foo title="Hi" />);
  18. await user.click(screen.getByRole('button', { name: /click/i }));
  19. expect(onAction).toHaveBeenCalled();
  20. })
  21. })
  22. ```
  23. # Executing tests
  24. ```shell
  25. # Run all tests
  26. npm run test
  27. npm run test-coverage
  28. npm run test-clearCache
  29. # Run a single file
  30. npm test -- --testPathPattern=WelcomeTour
  31. # Run tests with verbose output
  32. npm test -- --verbose
  33. # Run tests and show console output
  34. npm test -- --verbose --silent=false
  35. # Run tests and stop on first failure
  36. npm test -- --bail
  37. ```