تست برنامه‌های React با کتابخانه تست

در دنیای توسعه نرم‌افزار، تضمین کیفیت و عملکرد درست برنامه‌ها امری حیاتی است. از آنجا که React به عنوان یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت برای توسعه وب به شمار می‌رود، برنامه‌نویسان نیاز دارند تا بتوانند آزمایش و اعتبارسنجی کد React خود را با دقت انجام دهند. در این مقاله، به شما نشان خواهیم داد که چگونه می‌توانید برنامه‌های React خود را با استفاده از کتابخانه تست به بهترین شکل ممکن آزمایش کنید.

موارد ضروری که می‌توانید در کامپوننت‌های React آزمایش کنید:

• Render: مطمئن شوید که کامپوننت بدون ایجاد خطا رندر می شود.
• Props: تست کنید که کامپوننت به درستی props را می پذیرد و استفاده می کند.
• State: تست کنید که کامپوننت وضعیت خود را به درستی به روز می کند.
• رویدادها: تست کنید که کامپوننت به درستی رویدادها را مدیریت کند.
• روش‌های چرخه زندگی: آزمایش کنید که کامپوننت به‌درستی روش‌های چرخه حیات خود را مانند componentDidMount، componentDidUpdate و componentWillUnmount را مدیریت می‌کند.
• تست Snapshot : از تست فوری استفاده کنید تا اطمینان حاصل کنید که رابط کاربری کامپوننت به طور غیرمنتظره در طول زمان تغییر نمی کند.
• دسترس‌پذیری: تست کنید که این کامپوننت برای کاربران دارای معلولیت قابل دسترسی است.
• تست یکپارچه سازی: تست کنید که کامپوننت در صورت ادغام با سایر کامپوننت ها به درستی کار می کند.
• عملکرد: تست کنید که قطعه مشکلی در عملکرد یا نشت حافظه نداشته باشد.
• مدیریت خطا: تست کنید که کامپوننت با خطاها و موارد لبه به خوبی برخورد می کند.
• فراخوانی های API: تست کنید که کامپوننت به درستی تماس های API را انجام می دهد و پاسخ را به درستی مدیریت می کند.
• امنیت: تست کنید که کامپوننت هیچ آسیب‌پذیری امنیتی ایجاد نمی‌کند.
• مسیریابی: تست کنید که کامپوننت به درستی بین مسیرهای موجود در برنامه حرکت کند.
• احراز هویت: آزمایش کنید که کامپوننت به درستی احراز هویت و مجوز را انجام می دهد.
• موارد لبه(Edge cases): تست کنید که کامپوننت با موارد لبه(Edge cases)، مانند پرپ های خالی یا پوچ، به درستی برخورد کند.

قبل از هر چیزی نیاز است که با نحوه نوشتن نقشه تست نویسی آشنا شویم.

کتابخانه تست React چیست؟

کتابخانه تست React یک مجموعه ابزار و توابع است که به توسعه‌دهندگان React کمک می‌کند تا تست‌های واحد و تست‌های انتگرالی برای کامپوننت‌ها و صفحات React خود بنویسند و اجرا کنند. این کتابخانه‌ها و ابزارها ابزارهای قدرتمندی هستند که به تضمین کیفیت و عملکرد صحیح کد React کمک می‌کنند.

کتابخانه تست React شامل ابزارهایی مانند:

Jest: Jest یک فریم‌ورک تست JavaScript است که به طور خاص برای تست کد React طراحی شده است. این فریم‌ورک مخصوصاً برای نوشتن تست‌های واحد و تست‌های snapshot React بسیار قوی است.

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

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

Testing Utilities: بسیاری از کتابخانه‌های تست دیگری همچون RTL (React Testing Library) ابزارهای کارآمدی برای تست React ارائه می‌دهند که به توسعه‌دهندگان اجازه می‌دهند تست‌های جامعتر و دقیق‌تری برای کد React خود بنویسند.

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

فلسفه کلیدی پشت کتابخانه تست این است که کامپوننت‌ها را به گونه ای آزمایش کنید که گویی کاربر در حال تعامل با برنامه هستید. این رویکرد نوشتن تست‌هایی را آسان‌تر می‌کند که شباهت زیادی به تجربه کاربر دارند و اطمینان حاصل می‌کنند که اپلیکیشن طبق برنامه کار می‌کند.

چگونه از React Testing Library استفاده کنیم؟

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

ابتدا باید کتابخانه تست React را به پروژه‌ی خود اضافه کنید. برای نصب آن، از دستور زیر استفاده کنید:

npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event @types/jest

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

فرض کنید یک کامپوننت‌ساده به نام «Counter» داریم که یک مقدار شمارنده را نمایش می دهد و به کاربر اجازه می دهد آن را افزایش و کاهش دهد. در اینجا این کامپوننت به نظر می رسد:

import React, { useState } from 'react';

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

  const handleIncrement = () => {
    setCount(count + 1);
  }

  const handleDecrement = () => {
    setCount(count - 1);
  }

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

export default Counter;

برای آزمایش این کامپوننت‌ساده با استفاده از Testing Library، می‌توانیم آزمایشی بنویسیم که بررسی می‌کند که مقدار شمارنده از 0 شروع شود، با کلیک روی دکمه «افزایش» افزایش می‌یابد و با کلیک روی دکمه «کاهش» کاهش می‌یابد.

در اینجا تست به نظر می رسد:

import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('counter increments and decrements correctly', () => {
  const { getByText } = render(<Counter />);

  // check that the counter starts at 0
  const counterValue = getByText('0');
  expect(counterValue).toBeInTheDocument();

  // click the increment button and check that the counter increments
  const incrementButton = getByText('Increment');
  fireEvent.click(incrementButton);
  expect(counterValue).toHaveTextContent('1');

  // click the decrement button and check that the counter decrements
  const decrementButton = getByText('Decrement');
  fireEvent.click(decrementButton);
  expect(counterValue).toHaveTextContent('0');
});

در این تست ابتدا کامپوننت‌ Counter را با استفاده از تابع render از Testing Library رندر می کنیم. سپس از تابع getByText برای یافتن نود متنی "0" استفاده می کنیم و بررسی می کنیم که در داکیومنت باشد. سپس با استفاده از تابع fireEvent.click کلیک روی دکمه "Increment" را شبیه سازی می کنیم و بررسی می کنیم که مقدار شمارنده به درستی با استفاده از تابع toHaveTextContent به روز شده باشد.

سپس کلیک بر روی دکمه "Decrement" را شبیه سازی می کنیم و بررسی می کنیم که مقدار شمارنده به درستی با استفاده از همان تابع به روز شده باشد.

این یک مثال ساده است، اما قدرت و سادگی کتابخانه تست را نشان می دهد. تنها با چند خط کد، می‌توانیم بررسی کنیم که کامپوننت‌ ما به درستی رفتار می‌کند و تجربه کاربر همان چیزی است که ما انتظار داریم.

برای اجرای تست می توانید مراحل زیر را دنبال کنید:

npx jest

یا با اضافه کردن کد زیر در package.json :

"scripts": {

    "test": "jest"
  },

بهترین روش ها برای آزمایش با React Testing Library

در زمینه تست با کتابخانه تست React (React Testing Library)، تعدادی رویکردهای بهترین عملکرد و عادات خوب وجود دارد که می‌توانند به کیفیت تست‌های شما کمک کنند. در ادامه بهترین عملکردهایی که در تست با React Testing Library مورد توصیه قرار می‌گیرند را برجسته می‌کنیم:

تست کردن رفتار کاربر: ترجیحاً تست‌هایی بنویسید که به رفتار واقعی کاربر نزدیک باشند. به جای تست کردن جزئیات پیاده‌سازی، ترکیب کامپوننت‌ها و عملیاتی که کاربر می‌تواند انجام دهد را تست کنید.

استفاده از screen برای انتخاب المان‌ها: از screen که از کتابخانه تست React ارائه می‌شود برای انتخاب المان‌های DOM استفاده کنید. به جای استفاده از توابع خاص برای انتخاب المان‌ها، از screen.getByRole(), screen.getByText, و متد‌های مشابه استفاده کنید.

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

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

استفاده از توابع waitFor برای تاخیر: در تست‌ها ممکن است نیاز به صبر برای رخدادهایی مثل تغییر وضعیت داشته باشید. از توابع waitFor برای صبر به مدت زمان مشخصی برای وقوع یک شرایط استفاده کنید.

شناسایی المان‌ها با data-testid: برای انتخاب المان‌ها در تست‌ها، data-testid به عنوان یک ویژگی مخصوص استفاده کنید. این به شما کمک می‌کند تا از تغییرات در ساختار DOM جلوگیری کنید.

نگه‌داشتن تست‌های واحد و تست‌های انتگرالی جداگانه: تست‌های واحد برای تست موارد مشخصی در یک کامپوننت خاص باید جداگانه نوشته شوند. تست‌های انتگرالی برای تست تعامل بین چند کامپوننت یا ماژول باید جداگانه نوشته شوند.

تست کردن مسیرها و مسیریابی: اگر از مسیریابی در پروژه‌ی خود استفاده می‌کنید، تست‌های مربوط به مسیرها و مسیریابی را نیز بنویسید تا اطمینان حاصل کنید که صفحات به درستی باز می‌شوند.

استفاده از متغیرهای تست: از متغیرهای تست برای ذخیره مواردی مانند المان‌های DOM مورد نیاز در تست‌های بلندتر استفاده کنید تا کد تست تمیزتر و قابل نگهداری تر باشد.

راه‌اندازی محیط تست: برای راحتی تست‌ها، محیط تستی مانند jest.setup.js یا beforeEach را برای تنظیمات مورد نیاز تست‌ها ایجاد کنید.

پاکسازی پس از تست‌ها: برای پاکسازی منابع و وضعیت برنامه پس از اجرای تست‌ها از توابع پاکسازی استفاده کنید تا تاثیر تست‌ها بر روی تست‌های دیگر را کاهش دهید.

تولید توضیحات مناسب: همواره توضیحات کاملی برای تست‌ها و توابع تستی خود ایجاد کنید تا دیگر توسعه‌دهندگان بتوانند به راحتی درک کنند که هر تست چه کاری را انجام می‌دهد.

استفاده از تست‌های Snapshot: تست‌های Snapshot برای بررسی تغییرات در رندرهای متوالی بسیار مفید هستند. از آنها برای اعتبارسنجی کامپوننت‌ها در طول زمان استفاده کنید.

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

با رعایت این بهترین عملکردها، تست‌هایتان با کتابخانه تست React موثرتر، خواناتر و کمتر از تغییرات کدی تحت تاثیر قرار می‌گیرند و به بهبود کیفیت نرم‌افزار شما کمک می‌کنند.

نتیجه

آزمایش برنامه‌های React با کتابخانه تست یکی از اصولی‌ترین قدم‌ها در جهت افزایش کیفیت و عملکرد برنامه‌ها است. با رعایت تمامی مراحلی که در این مقاله بررسی شدند و استفاده از ابزارهای مناسب، شما می‌توانید برنامه‌های React خود را به بهترین شکل ممکن تست کرده و از نتایج بهتری برخوردار شوید.