اختبار الوحدات للمكوّنات

Welcome to unit testing for React components! Unit testing helps ensure that the smallest, independent parts of your code — your components — work exactly as intended.

• What is a unit test? It's a test for a 'unit' of code, often a single function or component.
• Why test components? To catch bugs early, prevent regressions, and ensure your UI behaves predictably.
• We'll focus on isolating components and testing their specific functionality.

Jest is a popular JavaScript testing framework developed by Facebook. It's often used with React because it's fast, feature-rich, and includes everything you need for testing.

• Test Runner: Executes your tests and reports results.
• Assertion Library: Provides functions like expect to check if values meet certain conditions.
• Mocking Library: Helps isolate code by replacing dependencies with 'mock' versions.

While Jest runs the tests, React Testing Library (RTL) helps you test React components in a way that mimics how users interact with them.

• User-centric: RTL encourages testing actual user behavior, not internal implementation details.
• Accessibility: Its querying methods (like getByRole) promote good accessibility practices.
• It provides utilities to render components, query the DOM, and simulate user events.

Next.js projects often come with Jest and RTL already configured or easily added. Here's what you'll typically use:

• jest: The core test runner.
• @testing-library/react: The main library for testing React components.
• @testing-library/jest-dom: Provides custom Jest matchers for better DOM assertions (e.g., .toBeInTheDocument()).

These libraries work together to create a powerful testing setup.

Let's create a simple MyButton component. It will display some text and execute a function when clicked. This is a common pattern for interactive UI elements.

We'll save this as components/MyButton.js:

Test files typically live alongside the component (e.g., components/MyButton.test.js). We use describe to group related tests and test (or it) for individual test cases.

First, let's just render our button and ensure it appears. We'll use render from RTL.

RTL provides various 'query' methods to find elements in the rendered component. It's best to use queries that resemble how a user would find elements, prioritizing accessibility.

• getByRole: Finds elements by their ARIA role (e.g., 'button', 'heading'). Highly recommended!
• getByText: Finds elements containing specific text.
• getByLabelText: Finds elements associated with a label.

We used getByText in the previous example, which is great for text content.

Now, let's test if our button's onClick handler is called when clicked. We use fireEvent from RTL to simulate user events and jest.fn() to create a 'mock' function.

jest.fn() lets us track if the function was called, how many times, and with what arguments. .toHaveBeenCalledTimes() is a jest-dom matcher.

You have a component called Greeting that displays 'Hello, [name]!'.

// components/Greeting.js

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Which test snippet correctly asserts that 'Hello, Alice!' is rendered?

Great job! You've taken your first steps into unit testing React components using Jest and React Testing Library.

• Jest is your test runner and assertion framework.
• React Testing Library helps you test components from a user's perspective.
• You learned to render components, query for elements, simulate user interactions, and make assertions about component behavior.

Keep practicing to build robust and reliable Next.js applications!