تست‌نویسی (Testing) در ری‌اکت

تست‌نویسی (Testing) در ری‌اکت یکی از بخش‌های حیاتی برای اطمینان از کیفیت و صحت عملکرد برنامه است. ری‌اکت ابزارهای متعددی برای تست دارد که به شما کمک می‌کنند تا کد خود را به‌طور مؤثری تست کنید. در اینجا مراحل و ابزارهای رایج برای تست‌نویسی در ری‌اکت آورده شده است:

1. انواع تست‌ها در ری‌اکت

قبل از شروع به نوشتن تست‌ها، مهم است که انواع مختلف تست‌ها را بشناسید:

Unit Test (تست واحد): این تست‌ها برای تست اجزای کوچکتر کد (مانند توابع یا کامپوننت‌ها) به‌طور جداگانه طراحی می‌شوند.

Integration Test (تست یکپارچه‌سازی): این تست‌ها بررسی می‌کنند که اجزای مختلف کد با هم به‌درستی کار کنند.

End-to-End Test (تست E2E): این تست‌ها کل سیستم را از ابتدای تا انتها آزمایش می‌کنند، یعنی از دیدگاه کاربر.

Snapshot Test (تست عکس‌برداری): این تست‌ها برای مقایسه خروجی فعلی کامپوننت‌ها با نسخه قبلی آن‌ها استفاده می‌شوند.

2. ابزارهای رایج برای تست در ری‌اکت

برای تست‌نویسی در ری‌اکت، ابزارهای مختلفی وجود دارند. برخی از ابزارهای مهم عبارتند از:

Jest: یک فریم‌ورک تست‌نویسی جاوااسکریپت که به‌طور پیش‌فرض همراه با ری‌اکت برای انجام Unit Test و Snapshot Test استفاده می‌شود. Jest ابزار قدرتمند و سریعی برای تست است.

React Testing Library: این کتابخانه به شما کمک می‌کند تا تست‌هایی بنویسید که بیشتر شبیه به رفتار واقعی کاربران باشند. این کتابخانه از Jest به‌عنوان فریم‌ورک تست استفاده می‌کند.

Enzyme: یک کتابخانه قدیمی‌تر برای تست کامپوننت‌های ری‌اکت که به شما این امکان را می‌دهد تا کامپوننت‌ها را شبیه‌سازی و تعاملات آن‌ها را بررسی کنید.

Cypress: یک ابزار برای انجام تست‌های End-to-End که به شما این امکان را می‌دهد تا تست‌های شبیه به تجربه واقعی کاربر را در مرورگر اجرا کنید.

3. نحوه نوشتن تست‌ها در ری‌اکت

3.1. نصب ابزارهای لازم

ابتدا باید ابزارهای مورد نیاز را نصب کنید:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

3.2. نوشتن یک Unit Test ساده با Jest و React Testing Library

فرض کنید یک کامپوننت ساده به نام Counter داریم که یک دکمه برای افزایش شمارنده دارد:

import React, { useState } from 'react';

function Counter() {

  const [count, setCount] = useState(0);

  return (

    <div>

      <p>{count}</p>

      <button onClick={() => setCount(count + 1)}>Increase</button>

    </div>

  );

}

export default Counter;

برای نوشتن تست این کامپوننت با Jest و React Testing Library، می‌توانیم این‌طور عمل کنیم:

import { render, screen, fireEvent } from '@testing-library/react';

import Counter from './Counter';

test('increments the counter when the button is clicked', () => {

  render(<Counter />);

  // پیدا کردن دکمه و پاراگراف

  const button = screen.getByText('Increase');

  const countParagraph = screen.getByText('0');

  // شبیه‌سازی کلیک بر روی دکمه

  fireEvent.click(button);

  // بررسی اینکه شمارنده افزایش یافته است

  expect(countParagraph).toHaveTextContent('1');

});

در این تست:

از render() برای رندر کردن کامپوننت استفاده می‌کنیم.

با استفاده از screen.getByText() به‌دنبال متن‌هایی که در کامپوننت قرار دارند می‌گردیم.

از fireEvent.click() برای شبیه‌سازی کلیک روی دکمه استفاده می‌کنیم.

از expect() برای بررسی این که شمارنده بعد از کلیک به درستی افزایش یافته است، استفاده می‌کنیم.

3.3. نوشتن Snapshot Test

برای گرفتن یک Snapshot از کامپوننت و مقایسه آن با نسخه قبلی، می‌توانید از toMatchSnapshot() استفاده کنید:

import { render } from '@testing-library/react';

import Counter from './Counter';

test('matches the snapshot', () => {

  const { asFragment } = render(<Counter />);

  expect(asFragment()).toMatchSnapshot();

});

این تست به‌طور خودکار یک snapshot از کامپوننت می‌گیرد و اگر در آینده تغییراتی در کد ایجاد شود، این تغییرات را با نسخه قبلی مقایسه می‌کند.

3.4. تست تعاملات پیچیده‌تر

اگر کامپوننت شما دارای ورودی‌های پیچیده‌تری است (مانند فرم‌ها)، می‌توانید تست‌هایی بنویسید که ورودی‌ها را شبیه‌سازی کنند:

import { render, screen, fireEvent } from '@testing-library/react';

import Form from './Form';

test('submits the form correctly', () => {

  render(<Form />);

  // پیدا کردن فیلدهای ورودی

  const nameInput = screen.getByPlaceholderText('Enter your name');

  const submitButton = screen.getByText('Submit');

  // وارد کردن اطلاعات در فیلد ورودی

  fireEvent.change(nameInput, { target: { value: 'John Doe' } });

  // شبیه‌سازی ارسال فرم

  fireEvent.click(submitButton);

  // بررسی اینکه فرم به‌درستی ارسال شده است

  expect(screen.getByText('Form submitted: John Doe')).toBeInTheDocument();

});

4. چگونه از این تست‌ها استفاده کنیم؟

پس از نوشتن تست‌ها، برای اجرا و بررسی نتایج، می‌توانید از دستور زیر استفاده کنید:

npm test

این دستور Jest را اجرا می‌کند و تمام تست‌ها را به‌صورت خودکار اجرا می‌کند.

5. نکات مهم

Isolation: سعی کنید هر تست تنها یک ویژگی خاص از کامپوننت را تست کند. این کار باعث می‌شود که تست‌ها به‌راحتی قابل فهم و تغییر باشند.

TDD (Test-Driven Development): رویکردی است که در آن ابتدا تست نوشته می‌شود و سپس کد بر اساس آن نوشته می‌شود. این روش به نوشتن کد قابل آزمایش و با کیفیت کمک می‌کند.

نتیجه‌گیری:

تست‌نویسی در ری‌اکت با استفاده از ابزارهایی مانند Jest و React Testing Library ساده است و می‌تواند به شما کمک کند تا از صحت عملکرد برنامه خود اطمینان حاصل کنید. این ابزارها با ایجاد تست‌هایی برای کامپوننت‌ها و تعاملات مختلف در ری‌اکت، به شما این امکان را می‌دهند که برنامه‌تان را با کیفیت بالایی نگه دارید.