نحوه تست هوک سفارشی در ReactJS

قلاب سفارشی چیست؟ 🤔

قلاب های سفارشی در ReactJS قطعات کد قابل استفاده مجدد هستند که منطق و مدیریت حالت را در بر می گیرند. به عنوان توسعه دهندگان، ما باید اطمینان حاصل کنیم که این قلاب ها همانطور که در نظر گرفته شده است کار می کنند و هیچ عارضه جانبی ناخواسته ای ندارند. اینجاست که تست قلاب های سفارشی بسیار مهم می شود.

در این مقاله، نحوه تست هوک های سفارشی در ReactJS با استفاده از useClipboard قلاب به عنوان نمونه

قلاب کلیپ بورد چیست؟ 🤔

این useClipboard hook یک قلاب ساده است که به شما امکان می دهد متن را در کلیپ بورد کپی کنید. سه پارامتر طول می کشد: متن برای کپی، تاخیر (در میلی‌ثانیه) برای بازگشت به حالت اولیه پس از کپی کردن، و a عملکرد برگشت به تماس برای اجرا زمانی که محتوا در کلیپ بورد کپی می شود.

در اینجا می‌توانید درباره نحوه استفاده از API کلیپ‌بورد برای کپی کردن متن بیشتر بخوانید.

import { useCallback, useEffect, useState } from 'react';

const useClipboard = (
  value: string,
  timeout = 1500,
  callBack?: () => void
) => {
  const [hasCopied, setHasCopied] = useState(false);
  const [valueState, setValueState] = useState(value);

  const handleCopy = useCallback(async () => {
    try {
      await navigator.clipboard.writeText(valueState);
      setHasCopied(true);
      callBack && callBack();
    } catch (error) {
      setHasCopied(false);
    }
  }, [valueState]);

  useEffect(() => setValueState(value), [value]);

  useEffect(() => {
    let timeoutId: number | null = null;

    if (hasCopied) {
      timeoutId = Number(
        setTimeout(() => {
          setHasCopied(false);
        }, timeout)
      );
    }

    return () => {
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
    };
  }, [timeout, hasCopied]);

  return {
    onCopyToClipBoard: handleCopy,
    hasCopied,
  };
};

قلاب useClipboard را تست کنید 🧪

برای شروع تست هوک ابتدا باید یک فایل تست ایجاد کنیم. بیایید آن را صدا کنیم useClipboard.test.tsx. در این فایل، ما آن را وارد می کنیم useClipboard قلاب و هر گونه وابستگی لازم

import { renderHook, act } from '@testing-library/react-hooks';
import { useClipboard } from './useClipboard';

چیست renderHook ? 💡

renderHook تابعی است که توسط @testing-library/react-hooks کتابخانه ای که به شما امکان می دهد قلاب های React را به صورت مجزا آزمایش کنید.

• این یک محیط آزمایشی برای قلاب های React با رندر کردن آنها در یک مؤلفه ساختگی فراهم می کند.

• این امکان را به شما می دهد تا رفتار و تغییرات حالت هوک را به صورت مجزا، بدون نیاز به کامپوننت کامل React آزمایش کنید.

• یک شی را با a برمی گرداند result دارایی که وضعیت فعلی قلاب را نگه می دارد.

خوب، اکنون می دانیم که تابع renderHook چیست و چگونه کار می کند.

در مرحله بعد، اولین آزمایش خود را می نویسیم تا بررسی کنیم که آیا قلاب یک شی با دو ویژگی را برمی گرداند: onCopyToClipBoard و hasCopied.

باید یک شی با دو ویژگی 🧪 برگرداند

it('should return an object with onCopyToClipBoard and hasCopied properties', () => {
  const { result } = renderHook(() => useClipboard('test'));
  expect(result.current).toHaveProperty('onCopyToClipBoard');
  expect(result.current).toHaveProperty('hasCopied');
});

در این تست قلاب را با استفاده از رندر می کنیم renderHook تابع از @testing-library/react-hooks. متنی را که می خواهیم کپی کنیم به عنوان آرگومان اول پاس می دهیم. سپس از expect تابعی برای بررسی اینکه آیا قلاب یک شی را با دو ویژگی مورد انتظار ما برمی گرداند یا خیر.

در مرحله بعد، ما یک آزمایش می نویسیم تا بررسی کنیم که آیا onCopyToClipBoard تابع را به روز می کند hasCopied حالت.

باید ایالت را به روز کرد 🧪

it('should update hasCopied state when content is copied to clipboard', async () => {
  const { result } = renderHook(() => useClipboard('test'));
  await act(async () => {
    result.current.onCopyToClipBoard();
  });
  expect(result.current.hasCopied).toBe(true);
});

در این تست، ما را صدا می کنیم onCopyToClipBoard عملکرد و استفاده کنید await کلمه کلیدی برای صبر کردن برای پایان اجرای عملکرد. سپس بررسی می کنیم که آیا hasCopied وضعیت به درستی تنظیم شده است.

در نهایت، یک آزمایش می نویسیم تا بررسی کنیم که آیا hasCopied حالت پس از اتمام بازنشانی می شود.

باید بعد از یک تایم اوت حالت را بازنشانی کرد 🧪

it('should reset hasCopied state after timeout', async () => {
  jest.useFakeTimers();
  const { result, rerender } = renderHook(() =>
    useClipboard('test', 1500)
  );
  await act(async () => {
    result.current.onCopyToClipBoard();
  });
  expect(result.current.hasCopied).toBe(true);
  act(() => {
    jest.advanceTimersByTime(1500);
  });
  rerender();
  expect(result.current.hasCopied).toBe(false);
  jest.useRealTimers();
});

در این تست از jest.useFakeTimers() عملکرد تقلبی تایمر قلاب را با تاخیر 1500 میلی ثانیه رندر می کنیم و با آن تماس می گیریم onCopyToClipBoard تابع. سپس تایمر را 1500 میلی‌ثانیه جلو می‌بریم و قلاب را دوباره رندر می‌کنیم. در نهایت، بررسی می کنیم که آیا hasCopied حالت روی false تنظیم شده است.

نتیجه ✨

آزمایش قلاب های سفارشی در ReactJS برای اطمینان از عملکرد اجزای ما بسیار مهم است. در حالی که ممکن است گاهی اوقات چالش برانگیز باشد، با رویکرد مناسب و ابزارهایی مانند @testing-library/react-hooks، ما می توانیم تست های موثر بنویسیم و اطمینان حاصل کنیم که قلاب های ما همانطور که در نظر گرفته شده است کار می کنند.

و این برای این موضوع است. ممنون که خواندید.

اگر این مقاله برای شما مفید بود، لطفاً لایک کنید و آن را با دیگران به اشتراک بگذارید. اگر سوالی دارید، در کامنت بگذارید و من تمام تلاشم را می کنم تا پاسخگو باشم.

منبع 💡

با من ارتباط برقرار کنید 👋