`act` ಯುಟಿಲಿಟಿಯೊಂದಿಗೆ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಅನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು: ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

ಟೆಸ್ಟಿಂಗ್ ಎಂಬುದು ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಸಾಫ್ಟ್‌ವೇರ್‌ನ ಮೂಲಾಧಾರವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಪರಿಸರ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯು ನಿರ್ಣಾಯಕವಾಗಿದೆ. `react-dom/test-utils` ನಿಂದ ಒದಗಿಸಲಾದ `act` ಯುಟಿಲಿಟಿ, ವಿಶ್ವಾಸಾರ್ಹ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಲು ಒಂದು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಮತ್ತು ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ.

`act` ಯುಟಿಲಿಟಿ ಎಂದರೇನು?

`act` ಯುಟಿಲಿಟಿ ಎಂಬುದು ಒಂದು ಫಂಕ್ಷನ್ ಆಗಿದ್ದು ಅದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಅಸರ್ಷನ್‌ಗಳಿಗಾಗಿ ಸಿದ್ಧಪಡಿಸುತ್ತದೆ. ನೀವು ಅಸರ್ಷನ್‌ಗಳನ್ನು ಮಾಡಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಎಲ್ಲಾ ಸಂಬಂಧಿತ ಅಪ್‌ಡೇಟ್‌ಗಳು ಮತ್ತು ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು DOM ಗೆ ಅನ್ವಯಿಸಲಾಗಿದೆ ಎಂದು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳನ್ನು ರಿಯಾಕ್ಟ್‌ನ ಆಂತರಿಕ ಸ್ಥಿತಿ ಮತ್ತು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡುವ ಒಂದು ಮಾರ್ಗವೆಂದು ಭಾವಿಸಿ.

ಸಾರಾಂಶದಲ್ಲಿ, `act` ರಿಯಾಕ್ಟ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಯಾವುದೇ ಕೋಡ್ ಅನ್ನು ಸುತ್ತುವರಿಯುತ್ತದೆ. ಇದು ಒಳಗೊಂಡಿದೆ:

• ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು (ಉದಾ., `onClick`, `onChange`)
• `useEffect` ಹುಕ್‌ಗಳು
• `useState` ಸೆಟ್ಟರ್‌ಗಳು
• ಕಾಂಪೊನೆಂಟ್‌ನ ಸ್ಥಿತಿಯನ್ನು ಮಾರ್ಪಡಿಸುವ ಯಾವುದೇ ಇತರ ಕೋಡ್

`act` ಇಲ್ಲದೆ, ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳು ರಿಯಾಕ್ಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಮೊದಲು ಅಸರ್ಷನ್‌ಗಳನ್ನು ಮಾಡಬಹುದು, ಇದು ಅಸ್ಥಿರ ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ನೀವು "An update to [component] inside a test was not wrapped in act(...)." ಎಂಬಂತಹ ಎಚ್ಚರಿಕೆಗಳನ್ನು ನೋಡಬಹುದು. ಈ ಎಚ್ಚರಿಕೆಯು ನಿಮ್ಮ ಟೆಸ್ಟ್ ರಿಯಾಕ್ಟ್ ಸ್ಥಿರ ಸ್ಥಿತಿಯಲ್ಲಿರುವ ಮೊದಲು ಅಸರ್ಷನ್‌ಗಳನ್ನು ಮಾಡುತ್ತಿರುವ ಸಂಭಾವ್ಯ ರೇಸ್ ಕಂಡೀಷನ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.

`act` ಏಕೆ ಮುಖ್ಯ?

`act` ಬಳಸಲು ಮುಖ್ಯ ಕಾರಣವೆಂದರೆ, ಟೆಸ್ಟಿಂಗ್ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸ್ಥಿರ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಸ್ಥಿತಿಯಲ್ಲಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು. ಇದು ಹಲವಾರು ಸಾಮಾನ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತದೆ:

1. ಅಸಿಂಕ್ರೋನಸ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಸಮಸ್ಯೆಗಳನ್ನು ತಡೆಯುವುದು

ರಿಯಾಕ್ಟ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿರುತ್ತವೆ, ಅಂದರೆ ಅವು ತಕ್ಷಣವೇ ನಡೆಯುವುದಿಲ್ಲ. ನೀವು `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
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `fireEvent.click` ನಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವ ಮೊದಲು `expect(screen.getByText('Count: 1')).toBeInTheDocument();` ಅಸರ್ಷನ್ ಮಾಡಲಾಗಿರುವುದರಿಂದ ಅದು ವಿಫಲವಾಗಬಹುದು.

2. ಎಲ್ಲಾ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲ್ಪಟ್ಟಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು

`useEffect` ಹುಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ API ನಿಂದ ಡೇಟಾವನ್ನು ತರುವುದು ಅಥವಾ DOM ಅನ್ನು ನೇರವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡುವಂತಹ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತವೆ. `act` ಈ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳು ಟೆಸ್ಟ್ ಮುಂದುವರಿಯುವ ಮೊದಲು ಪೂರ್ಣಗೊಂಡಿವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ, ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

3. ಟೆಸ್ಟ್‌ನ ವಿಶ್ವಾಸಾರ್ಹತೆ ಮತ್ತು ನಿರೀಕ್ಷೆಯನ್ನು ಸುಧಾರಿಸುವುದು

ರಿಯಾಕ್ಟ್‌ನ ಆಂತರಿಕ ಪ್ರಕ್ರಿಯೆಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಸಿಂಕ್ರೊನೈಸ್ ಮಾಡುವ ಮೂಲಕ, `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` ಸಾಲು, ವಿಶೇಷವಾಗಿ ಶೆಡ್ಯೂಲರ್ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ವಿಳಂಬಗೊಳಿಸಬಹುದಾದ ಪರಿಸರದಲ್ಲಿ, `useEffect` ಹುಕ್‌ನಲ್ಲಿರುವ `setData` ಕರೆಯಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟ ಅಪ್‌ಡೇಟ್ ಅನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು `act` ಗೆ ಸಮಯ ನೀಡಲು ಅವಶ್ಯಕವಾಗಿದೆ.

`act` ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

`act` ಯುಟಿಲಿಟಿಯಿಂದ ಹೆಚ್ಚಿನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

1. ಎಲ್ಲಾ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯಿರಿ

ರಿಯಾಕ್ಟ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಎಲ್ಲಾ ಕೋಡ್‌ಗಳು `act` ಕರೆಯಲ್ಲಿ ಸುತ್ತುವರಿದಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು, `useEffect` ಹುಕ್‌ಗಳು, ಮತ್ತು `useState` ಸೆಟ್ಟರ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.

2. ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್‌ಗಾಗಿ ಅಸಿಂಕ್ರೋನಸ್ `act` ಬಳಸಿ

ಅಸಿಂಕ್ರೋನಸ್ ಕೋಡ್‌ನೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ಟೆಸ್ಟ್ ಮುಂದುವರಿಯುವ ಮೊದಲು ಎಲ್ಲಾ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳು ಪೂರ್ಣಗೊಂಡಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು `act` ನ ಅಸಿಂಕ್ರೋನಸ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸಿ.

3. ನೆಸ್ಟೆಡ್ `act` ಕರೆಗಳನ್ನು ತಪ್ಪಿಸಿ

`act` ಕರೆಗಳನ್ನು ನೆಸ್ಟ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ. ನೆಸ್ಟಿಂಗ್ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಡೀಬಗ್ ಮಾಡಲು ಕಷ್ಟಕರವಾಗಿಸಬಹುದು. ನೀವು ಅನೇಕ ಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾದರೆ, ಅವೆಲ್ಲವನ್ನೂ ಒಂದೇ `act` ಕರೆಯಲ್ಲಿ ಸುತ್ತುವರಿಯಿರಿ.

4. ಅಸಿಂಕ್ರೋನಸ್ `act` ನೊಂದಿಗೆ `await` ಬಳಸಿ

`act` ನ ಅಸಿಂಕ್ರೋನಸ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುವಾಗ, ಟೆಸ್ಟ್ ಮುಂದುವರಿಯುವ ಮೊದಲು `act` ಕರೆ ಪೂರ್ಣಗೊಂಡಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ `await` ಬಳಸಿ. ಅಸಿಂಕ್ರೋನಸ್ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಮುಖ್ಯವಾಗಿದೆ.

5. ಅತಿಯಾಗಿ ಸುತ್ತುವರಿಯುವುದನ್ನು ತಪ್ಪಿಸಿ

ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯುವುದು ನಿರ್ಣಾಯಕವಾಗಿದ್ದರೂ, ನೇರವಾಗಿ ಸ್ಟೇಟ್ ಬದಲಾವಣೆಗಳು ಅಥವಾ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗದ ಕೋಡ್ ಅನ್ನು ಸುತ್ತುವರಿಯುವುದನ್ನು ತಪ್ಪಿಸಿ. ಅತಿಯಾಗಿ ಸುತ್ತುವರಿಯುವುದು ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಮತ್ತು ಕಡಿಮೆ ಓದಬಲ್ಲದಾಗಿಸಬಹುದು.

6. `flushMicrotasks` ಮತ್ತು `advanceTimersByTime` ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ವಿಶೇಷವಾಗಿ ಮಾಕ್ ಮಾಡಿದ ಟೈಮರ್‌ಗಳು ಅಥವಾ ಪ್ರಾಮಿಸ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ, ರಿಯಾಕ್ಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ತಕ್ಷಣವೇ ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಲು ನೀವು `act(() => jest.advanceTimersByTime(time))` ಅಥವಾ `act(() => flushMicrotasks())` ಅನ್ನು ಬಳಸಬೇಕಾಗಬಹುದು. ಇವು ಹೆಚ್ಚು ಸುಧಾರಿತ ತಂತ್ರಗಳಾಗಿವೆ, ಆದರೆ ಅವುಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಸಂಕೀರ್ಣ ಅಸಿಂಕ್ರೋನಸ್ ಸನ್ನಿವೇಶಗಳಿಗೆ ಸಹಾಯಕವಾಗಬಹುದು.

7. `@testing-library/user-event` ನಿಂದ `userEvent` ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ

`fireEvent` ಬದಲಿಗೆ, `@testing-library/user-event` ನಿಂದ `userEvent` ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. `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` ಯುಟಿಲಿಟಿ ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದ್ದರೂ, ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ತಪ್ಪಿಸುವುದು ಎಂಬುದರ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮುಖ್ಯ:

1. ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಸುತ್ತುವರಿಯಲು ಮರೆಯುವುದು

ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಅಪಾಯವೆಂದರೆ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು `act` ಕರೆಯಲ್ಲಿ ಸುತ್ತುವರಿಯಲು ಮರೆಯುವುದು. ಇದು ಅಸ್ಥಿರ ಟೆಸ್ಟ್‌ಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗಬಹುದು. ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗುವ ಎಲ್ಲಾ ಕೋಡ್ `act` ನಲ್ಲಿ ಸುತ್ತುವರಿದಿದೆಯೇ ಎಂದು ಯಾವಾಗಲೂ ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ.

2. ಅಸಿಂಕ್ರೋನಸ್ `act` ಅನ್ನು ತಪ್ಪಾಗಿ ಬಳಸುವುದು

`act` ನ ಅಸಿಂಕ್ರೋನಸ್ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುವಾಗ, `act` ಕರೆಯನ್ನು `await` ಮಾಡುವುದು ಮುಖ್ಯ. ಹಾಗೆ ಮಾಡಲು ವಿಫಲವಾದರೆ ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳು ಮತ್ತು ತಪ್ಪಾದ ಫಲಿತಾಂಶಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

3. `setTimeout` ಅಥವಾ `flushPromises` ಮೇಲೆ ಅತಿಯಾಗಿ ಅವಲಂಬಿತರಾಗುವುದು

ಅಸಿಂಕ್ರೋನಸ್ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳೊಂದಿಗಿನ ಸಮಸ್ಯೆಗಳನ್ನು ನಿವಾರಿಸಲು ಕೆಲವೊಮ್ಮೆ `setTimeout` ಅಥವಾ `flushPromises` ಅನ್ನು ಬಳಸಬಹುದಾದರೂ, ಅವುಗಳನ್ನು ಮಿತವಾಗಿ ಬಳಸಬೇಕು. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು `act` ಅನ್ನು ಸರಿಯಾಗಿ ಬಳಸುವುದು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ.

4. ಎಚ್ಚರಿಕೆಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು

ನೀವು "An update to [component] inside a test was not wrapped in act(...)." ಎಂಬಂತಹ ಎಚ್ಚರಿಕೆಯನ್ನು ನೋಡಿದರೆ, ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಬೇಡಿ! ಈ ಎಚ್ಚರಿಕೆಯು ಪರಿಹರಿಸಬೇಕಾದ ಸಂಭಾವ್ಯ ರೇಸ್ ಕಂಡೀಷನ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ವಿವಿಧ ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಉದಾಹರಣೆಗಳು

`act` ಯುಟಿಲಿಟಿಯು ಪ್ರಾಥಮಿಕವಾಗಿ ರಿಯಾಕ್ಟ್‌ನ ಟೆಸ್ಟಿಂಗ್ ಯುಟಿಲಿಟಿಗಳೊಂದಿಗೆ ಸಂಬಂಧ ಹೊಂದಿದೆ, ಆದರೆ ನೀವು ಬಳಸುತ್ತಿರುವ ನಿರ್ದಿಷ್ಟ ಟೆಸ್ಟಿಂಗ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ ತತ್ವಗಳು ಅನ್ವಯಿಸುತ್ತವೆ.

1. ಜೆಸ್ಟ್ ಮತ್ತು ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯೊಂದಿಗೆ `act` ಬಳಸುವುದು

ಇದು ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯು ಸರಿಯಾದ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು `act` ಬಳಕೆಯನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ.

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

// Component and test (as shown previously)

            

              
                Copy
              
            
          

2. ಎಂಜೈಮ್‌ನೊಂದಿಗೆ `act` ಬಳಸುವುದು

ಎಂಜೈಮ್ ಮತ್ತೊಂದು ಜನಪ್ರಿಯ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯಾಗಿದೆ, ಆದರೂ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ಪಡೆಯುತ್ತಿದ್ದಂತೆ ಇದು ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗುತ್ತಿದೆ. ಸರಿಯಾದ ಸ್ಟೇಟ್ ಅಪ್‌ಡೇಟ್‌ಗಳನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಇನ್ನೂ ಎಂಜೈಮ್‌ನೊಂದಿಗೆ `act` ಅನ್ನು ಬಳಸಬಹುದು.

            
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
              
            
          

ಗಮನಿಸಿ: ಎಂಜೈಮ್‌ನೊಂದಿಗೆ, `act` ಕರೆಯ ನಂತರ ಮರು-ರೆಂಡರ್ ಮಾಡಲು ನೀವು `wrapper.update()` ಅನ್ನು ಕರೆಯಬೇಕಾಗಬಹುದು.

ವಿವಿಧ ಜಾಗತಿಕ ಸಂದರ್ಭಗಳಲ್ಲಿ `act`

`act` ಬಳಸುವ ತತ್ವಗಳು ಸಾರ್ವತ್ರಿಕವಾಗಿವೆ, ಆದರೆ ಪ್ರಪಂಚದಾದ್ಯಂತದ ವಿವಿಧ ಅಭಿವೃದ್ಧಿ ತಂಡಗಳು ಬಳಸುವ ನಿರ್ದಿಷ್ಟ ಪರಿಸರ ಮತ್ತು ಸಾಧನಗಳನ್ನು ಅವಲಂಬಿಸಿ ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್ ಸ್ವಲ್ಪ ಬದಲಾಗಬಹುದು. ಉದಾಹರಣೆಗೆ:

• ಟೈಪ್‌ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುವ ತಂಡಗಳು: `@types/react-dom` ನಿಂದ ಒದಗಿಸಲಾದ ಟೈಪ್‌ಗಳು `act` ಅನ್ನು ಸರಿಯಾಗಿ ಬಳಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ ಮತ್ತು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಕಂಪೈಲ್-ಟೈಮ್ ಪರಿಶೀಲನೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ.
• CI/CD ಪೈಪ್‌ಲೈನ್‌ಗಳನ್ನು ಬಳಸುವ ತಂಡಗಳು: `act` ನ ಸ್ಥಿರ ಬಳಕೆಯು ಟೆಸ್ಟ್‌ಗಳು ವಿಶ್ವಾಸಾರ್ಹವಾಗಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು CI/CD ಪರಿಸರದಲ್ಲಿ, ಮೂಲಸೌಕರ್ಯ ಪೂರೈಕೆದಾರರನ್ನು (ಉದಾ., GitHub Actions, GitLab CI, Jenkins) ಲೆಕ್ಕಿಸದೆ, ನಕಲಿ ವೈಫಲ್ಯಗಳನ್ನು ತಡೆಯುತ್ತದೆ.
• ಅಂತರಾಷ್ಟ್ರೀಕರಣ (i18n) ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ತಂಡಗಳು: ಸ್ಥಳೀಯ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವಾಗ, ಸ್ಥಳೀಯ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಅಥವಾ ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಸಂಬಂಧಿಸಿದ ಯಾವುದೇ ಅಸಿಂಕ್ರೋನಸ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಅಥವಾ ಸೈಡ್ ಎಫೆಕ್ಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು `act` ಅನ್ನು ಸರಿಯಾಗಿ ಬಳಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಮುಖ್ಯವಾಗಿದೆ.

ತೀರ್ಮಾನ

`act` ಯುಟಿಲಿಟಿ ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ನಿರೀಕ್ಷಿತ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟ್‌ಗಳನ್ನು ಬರೆಯಲು ಒಂದು ಪ್ರಮುಖ ಸಾಧನವಾಗಿದೆ. ನಿಮ್ಮ ಟೆಸ್ಟ್‌ಗಳು ರಿಯಾಕ್ಟ್‌ನ ಆಂತರಿಕ ಪ್ರಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಸಿಂಕ್ರೊನೈಸ್ ಆಗಿವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, `act` ರೇಸ್ ಕಂಡೀಷನ್‌ಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು `act` ಯುಟಿಲಿಟಿಯನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಬಹುದು ಮತ್ತು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಬರೆಯಬಹುದು. ಎಚ್ಚರಿಕೆಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು ಮತ್ತು `act` ಬಳಕೆಯನ್ನು ಬಿಟ್ಟುಬಿಡುವುದು ಡೆವಲಪರ್‌ಗಳು ಮತ್ತು ಪಾಲುದಾರರಿಗೆ ಸುಳ್ಳು ಹೇಳುವ ಟೆಸ್ಟ್ ಸೂಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಇದು ಉತ್ಪಾದನೆಯಲ್ಲಿ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ವಿಶ್ವಾಸಾರ್ಹ ಟೆಸ್ಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಯಾವಾಗಲೂ `act` ಅನ್ನು ಬಳಸಿ.