تسلط بر تست‌نویسی ری‌اکت با ابزار `act`: یک راهنمای جامع

تست‌نویسی سنگ بنای نرم‌افزارهای قوی و قابل نگهداری است. در اکوسیستم ری‌اکت، تست‌نویسی دقیق برای اطمینان از اینکه کامپوننت‌های شما همانطور که انتظار می‌رود رفتار می‌کنند و تجربه کاربری قابل اعتمادی را ارائه می‌دهند، بسیار حیاتی است. ابزار `act` که توسط `react-dom/test-utils` ارائه شده، یک ابزار ضروری برای نوشتن تست‌های قابل اعتماد ری‌اکت است، به خصوص هنگام کار با به‌روزرسانی‌های ناهمگام وضعیت و اثرات جانبی (side effects).

ابزار `act` چیست؟

ابزار `act` یک تابع است که یک کامپوننت ری‌اکت را برای اعتبارسنجی‌ها (assertions) آماده می‌کند. این ابزار تضمین می‌کند که تمام به‌روزرسانی‌ها و اثرات جانبی مرتبط قبل از شروع اعتبارسنجی‌ها بر روی DOM اعمال شده‌اند. آن را به عنوان راهی برای همگام‌سازی تست‌های خود با وضعیت داخلی و فرآیندهای رندرینگ ری‌اکت در نظر بگیرید.

در اصل، `act` هر کدی را که باعث به‌روزرسانی وضعیت ری‌اکت می‌شود، در بر می‌گیرد. این شامل موارد زیر است:

• کنترل‌کننده‌های رویداد (event handlers) (مانند `onClick`، `onChange`)
• هوک‌های `useEffect`
• توابع تنظیم‌کننده `useState`
• هر کد دیگری که وضعیت کامپوننت را تغییر می‌دهد

بدون `act`، ممکن است تست‌های شما قبل از اینکه ری‌اکت به‌روزرسانی‌ها را به طور کامل پردازش کند، اعتبارسنجی‌ها را انجام دهند که منجر به نتایج ناپایدار و غیرقابل پیش‌بینی می‌شود. ممکن است هشدارهایی مانند «یک به‌روزرسانی در [کامپوننت] در داخل یک تست در act(...) پیچیده نشده بود.» را مشاهده کنید. این هشدار نشان‌دهنده یک وضعیت رقابتی (race condition) بالقوه است که در آن تست شما قبل از اینکه ری‌اکت به یک وضعیت پایدار برسد، در حال انجام اعتبارسنجی است.

چرا `act` مهم است؟

دلیل اصلی استفاده از `act` این است که اطمینان حاصل شود کامپوننت‌های ری‌اکت شما در طول تست‌نویسی در یک وضعیت پایدار و قابل پیش‌بینی قرار دارند. این ابزار چندین مشکل رایج را برطرف می‌کند:

۱. جلوگیری از مشکلات به‌روزرسانی ناهمگام وضعیت

به‌روزرسانی‌های وضعیت در ری‌اکت اغلب ناهمگام (asynchronous) هستند، به این معنی که بلافاصله اتفاق نمی‌افتند. وقتی شما `setState` را فراخوانی می‌کنید، ری‌اکت یک به‌روزرسانی را زمان‌بندی می‌کند اما فوراً آن را اعمال نمی‌کند. بدون `act`، تست شما ممکن است یک مقدار را قبل از پردازش به‌روزرسانی وضعیت اعتبارسنجی کند که منجر به نتایج نادرست می‌شود.

مثال: تست نادرست (بدون `act`)

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

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');
  fireEvent.click(incrementButton);
  expect(screen.getByText('Count: 1')).toBeInTheDocument(); // This might fail!
});

            

              
                Copy
              
            
          

در این مثال، اعتبارسنجی `expect(screen.getByText('Count: 1')).toBeInTheDocument();` ممکن است با شکست مواجه شود زیرا به‌روزرسانی وضعیت که توسط `fireEvent.click` ایجاد شده، در زمان انجام اعتبارسنجی به طور کامل پردازش نشده است.

۲. اطمینان از پردازش تمام اثرات جانبی

هوک‌های `useEffect` اغلب اثرات جانبی مانند دریافت داده از یک API یا به‌روزرسانی مستقیم DOM را ایجاد می‌کنند. `act` تضمین می‌کند که این اثرات جانبی قبل از ادامه تست تکمیل شده‌اند، که از وضعیت‌های رقابتی جلوگیری کرده و اطمینان می‌دهد که کامپوننت شما همانطور که انتظار می‌رود رفتار می‌کند.

۳. بهبود قابلیت اطمینان و پیش‌بینی‌پذیری تست‌ها

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

چگونه از ابزار `act` استفاده کنیم

استفاده از ابزار `act` ساده است. کافی است هر کدی را که باعث به‌روزرسانی وضعیت ری‌اکت یا اثرات جانبی می‌شود، در یک فراخوانی `act` بپیچید.

مثال: تست صحیح (با `act`)

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

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

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

test('increments the counter', async () => {
  render(<Counter />);
  const incrementButton = screen.getByText('Increment');

  await act(async () => {
    fireEvent.click(incrementButton);
  });

  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

در این مثال اصلاح‌شده، فراخوانی `fireEvent.click` در یک فراخوانی `act` پیچیده شده است. این امر تضمین می‌کند که ری‌اکت قبل از انجام اعتبارسنجی، به‌روزرسانی وضعیت را به طور کامل پردازش کرده است.

`act` ناهمگام

ابزار `act` می‌تواند به صورت همگام یا ناهمگام استفاده شود. هنگام کار با کدهای ناهمگام (مانند هوک‌های `useEffect` که داده‌ها را دریافت می‌کنند)، باید از نسخه ناهمگام `act` استفاده کنید.

مثال: تست اثرات جانبی ناهمگام

            
import React, { useState, useEffect } from 'react';
import { render, screen, act } from '@testing-library/react';

async function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Fetched Data');
    }, 50);
  });
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function loadData() {
      const result = await fetchData();
      setData(result);
    }

    loadData();
  }, []);

  return <div>{data ? <p>{data}</p> : <p>Loading...</p>}</div>;
}

test('fetches data correctly', async () => {
  render(<MyComponent />);

  // Initial render shows "Loading..."
  expect(screen.getByText('Loading...')).toBeInTheDocument();

  // Wait for the data to load and the component to update
  await act(async () => {
    // The fetchData function will resolve after 50ms, triggering a state update.
    // The await here ensures we wait for act to complete all updates.
    await new Promise(resolve => setTimeout(resolve, 0)); // A small delay to allow act to process.
  });

  // Assert that the data is displayed
  expect(screen.getByText('Fetched Data')).toBeInTheDocument();
});

            

              
                Copy
              
            
          

در این مثال، هوک `useEffect` داده‌ها را به صورت ناهمگام دریافت می‌کند. فراخوانی `act` برای پیچیدن کد ناهمگام استفاده می‌شود و تضمین می‌کند که کامپوننت قبل از انجام اعتبارسنجی به طور کامل به‌روز شده است. خط `await new Promise` ضروری است تا به `act` زمان کافی برای پردازش به‌روزرسانی ناشی از فراخوانی `setData` در هوک `useEffect` داده شود، به ویژه در محیط‌هایی که زمان‌بند ممکن است به‌روزرسانی را به تأخیر بیندازد.

بهترین شیوه‌ها برای استفاده از `act`

برای بهره‌برداری حداکثری از ابزار `act`، این بهترین شیوه‌ها را دنبال کنید:

۱. تمام به‌روزرسانی‌های وضعیت را در `act` بپیچید

اطمینان حاصل کنید که تمام کدهایی که باعث به‌روزرسانی وضعیت ری‌اکت می‌شوند، در یک فراخوانی `act` پیچیده شده‌اند. این شامل کنترل‌کننده‌های رویداد، هوک‌های `useEffect` و توابع تنظیم‌کننده `useState` می‌شود.

۲. برای کدهای ناهمگام از `act` ناهمگام استفاده کنید

هنگام کار با کدهای ناهمگام، از نسخه ناهمگام `act` استفاده کنید تا اطمینان حاصل شود که تمام اثرات جانبی قبل از ادامه تست تکمیل شده‌اند.

۳. از فراخوانی‌های تودرتوی `act` خودداری کنید

از تودرتو کردن فراخوانی‌های `act` خودداری کنید. تودرتو کردن می‌تواند منجر به رفتار غیرمنتظره شده و اشکال‌زدایی تست‌های شما را دشوارتر کند. اگر نیاز به انجام چندین عمل دارید، همه آنها را در یک فراخوانی `act` بپیچید.

۴. همراه با `act` ناهمگام از `await` استفاده کنید

هنگام استفاده از نسخه ناهمگام `act`، همیشه از `await` استفاده کنید تا اطمینان حاصل شود که فراخوانی `act` قبل از ادامه تست تکمیل شده است. این امر به ویژه هنگام کار با اثرات جانبی ناهمگام اهمیت دارد.

۵. از پیچیدن بیش از حد کدها در `act` خودداری کنید

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

۶. درک `flushMicrotasks` و `advanceTimersByTime`

در سناریوهای خاص، به ویژه هنگام کار با تایمرها یا پرامیس‌های شبیه‌سازی شده، ممکن است نیاز به استفاده از `act(() => jest.advanceTimersByTime(time))` یا `act(() => flushMicrotasks())` داشته باشید تا ری‌اکت را وادار به پردازش فوری به‌روزرسانی‌ها کنید. اینها تکنیک‌های پیشرفته‌تری هستند، اما درک آنها می‌تواند برای سناریوهای ناهمگام پیچیده مفید باشد.

۷. استفاده از `userEvent` از کتابخانه `@testing-library/user-event` را در نظر بگیرید

به جای `fireEvent`، استفاده از `userEvent` از `@testing-library/user-event` را در نظر بگیرید. `userEvent` تعاملات واقعی کاربر را با دقت بیشتری شبیه‌سازی می‌کند و اغلب فراخوانی‌های `act` را به صورت داخلی مدیریت می‌کند که منجر به تست‌های تمیزتر و قابل اعتمادتری می‌شود. برای مثال:

            
import React, { useState } from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

function MyComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

test('updates the input value', async () => {
  render(<MyComponent />);
  const inputElement = screen.getByRole('textbox');

  await userEvent.type(inputElement, 'hello');
  expect(inputElement.value).toBe('hello');
});

            

              
                Copy
              
            
          

در این مثال، `userEvent.type` فراخوانی‌های ضروری `act` را به صورت داخلی مدیریت می‌کند، که باعث می‌شود تست تمیزتر و خواناتر باشد.

مشکلات رایج و نحوه جلوگیری از آن‌ها

در حالی که ابزار `act` یک ابزار قدرتمند است، آگاهی از مشکلات رایج و نحوه جلوگیری از آنها مهم است:

۱. فراموش کردن پیچیدن به‌روزرسانی‌های وضعیت در `act`

رایج‌ترین مشکل، فراموش کردن پیچیدن به‌روزرسانی‌های وضعیت در یک فراخوانی `act` است. این می‌تواند منجر به تست‌های ناپایدار و رفتار غیرقابل پیش‌بینی شود. همیشه دوباره بررسی کنید که تمام کدهایی که باعث به‌روزرسانی وضعیت می‌شوند در `act` پیچیده شده‌اند.

۲. استفاده نادرست از `act` ناهمگام

هنگام استفاده از نسخه ناهمگام `act`، مهم است که فراخوانی `act` را `await` کنید. عدم انجام این کار می‌تواند منجر به وضعیت‌های رقابتی و نتایج نادرست شود.

۳. اتکای بیش از حد به `setTimeout` یا `flushPromises`

در حالی که `setTimeout` یا `flushPromises` گاهی اوقات می‌توانند برای حل مشکلات به‌روزرسانی‌های ناهمگام وضعیت استفاده شوند، باید به ندرت از آنها استفاده کرد. در بیشتر موارد، استفاده صحیح از `act` بهترین راه برای اطمینان از قابل اعتماد بودن تست‌های شماست.

۴. نادیده گرفتن هشدارها

اگر هشداری مانند «یک به‌روزرسانی در [کامپوننت] در داخل یک تست در act(...) پیچیده نشده بود.» مشاهده کردید، آن را نادیده نگیرید! این هشدار نشان‌دهنده یک وضعیت رقابتی بالقوه است که باید برطرف شود.

مثال‌ها در فریمورک‌های تست مختلف

ابزار `act` عمدتاً با ابزارهای تست ری‌اکت مرتبط است، اما اصول آن صرف نظر از فریمورک تست خاصی که استفاده می‌کنید، اعمال می‌شود.

۱. استفاده از `act` با Jest و React Testing Library

این رایج‌ترین سناریو است. کتابخانه تست ری‌اکت استفاده از `act` را برای اطمینان از به‌روزرسانی‌های صحیح وضعیت تشویق می‌کند.

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

// Component and test (as shown previously)

            

              
                Copy
              
            
          

۲. استفاده از `act` با Enzyme

Enzyme یکی دیگر از کتابخانه‌های محبوب تست ری‌اکت است، هرچند با برجسته شدن React Testing Library کمتر رایج شده است. شما همچنان می‌توانید از `act` با Enzyme برای اطمینان از به‌روزرسانی‌های صحیح وضعیت استفاده کنید.

            
import React from 'react';
import { mount } from 'enzyme';
import { act } from 'react-dom/test-utils';

// Example component (e.g., Counter from previous examples)

it('increments the counter', () => {
  const wrapper = mount(<Counter />);
  const button = wrapper.find('button');

  act(() => {
    button.simulate('click');
  });

  wrapper.update(); // Force re-render
  expect(wrapper.find('p').text()).toEqual('Count: 1');
});

            

              
                Copy
              
            
          

نکته: با Enzyme، ممکن است لازم باشد پس از فراخوانی `act`، متد `wrapper.update()` را برای وادار کردن کامپوننت به رندر مجدد فراخوانی کنید.

`act` در زمینه‌های جهانی مختلف

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

• تیم‌هایی که از TypeScript استفاده می‌کنند: تایپ‌های ارائه‌شده توسط `@types/react-dom` به اطمینان از استفاده صحیح از `act` کمک کرده و بررسی‌های زمان کامپایل را برای مشکلات احتمالی فراهم می‌کنند.
• تیم‌هایی که از پایپ‌لاین‌های CI/CD استفاده می‌کنند: استفاده مداوم از `act` تضمین می‌کند که تست‌ها قابل اعتماد بوده و از خرابی‌های کاذب در محیط‌های CI/CD، صرف نظر از ارائه‌دهنده زیرساخت (مانند GitHub Actions، GitLab CI، Jenkins) جلوگیری می‌کند.
• تیم‌هایی که با بین‌المللی‌سازی (i18n) کار می‌کنند: هنگام تست کامپوننت‌هایی که محتوای محلی‌سازی شده نمایش می‌دهند، مهم است که اطمینان حاصل شود `act` به درستی برای مدیریت هرگونه به‌روزرسانی ناهمگام یا اثرات جانبی مربوط به بارگیری یا به‌روزرسانی رشته‌های محلی‌سازی شده استفاده می‌شود.

نتیجه‌گیری

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