Rendering a Component
Basic component rendering validation using React Testing Library to assert user-visible output instead of implementation details.
import { render, screen } from "@testing-library/react";
import Button from "./Button";
test("renders button text", () => {
render(<Button />);
expect(screen.getByText("Click me")).toBeInTheDocument();
});✅ Good Practices
- Test behavior, not internal implementation.
❌ Anti-Patterns
- Testing private methods or internal state directly.
🧠 Decision
Use React Testing Library to validate observable behavior from the user perspective.
📈 Scale Impact
Encourages resilient tests that survive refactors.
⚖ Consistency Model
Behavior-driven validation at component boundary.
🏗 Infrastructure Impact
Requires Jest environment configured with jsdom.
🔥 Failure Mode
Over-coupled tests break when refactoring implementation details.