How to Test React Hooks useEffect, useCallBack

When testing React Hooks, the primary focus is on how these Hooks impact component rendering and behavior. Specifically, useEffect and useCallback are two frequently used and critical Hooks.

Testing useEffect

It is primarily used for handling side effects, such as data fetching, subscriptions, or manual DOM manipulation. Testing useEffect involves the following steps:

1. Setup and Cleanup: Verify that useEffect correctly executes the expected side effects during mounting and unmounting.
2. Dependency Changes: Confirm that useEffect re-executes correctly when dependencies change.

Example:

Consider a component that fetches user data when the component mounts and cancels the data fetching when unmounting.

javascript
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`/api/users/${userId}`);
      const userData = await response.json();
      setUser(userData);
    };

    fetchData();

    return () => {
      // Assume we have logic to cancel the request
    };
  }, [userId]);

  return (
    <div>
      {user ? <p>{user.name}</p> : <p>Loading...</p>}
    </div>
  );
}

To test this component, we can use Jest with React Testing Library:

javascript
import { render, screen, waitFor } from '@testing-library/react';
import UserProfile from './UserProfile';

test('should fetch and display user data', async () => {
  fetch.mockResponseOnce(JSON.stringify({ name: 'Alice' }));

  render(<UserProfile userId="123" />);

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => screen.getByText('Alice'));

  expect(screen.getByText('Alice')).toBeInTheDocument();
});

Testing useCallback

useCallback is primarily used for caching functions to avoid recreating them on every component render. Testing useCallback primarily verifies whether the cached function updates when dependencies change.

Example:

Consider a search input component that uses useCallback to handle input changes:

javascript
function SearchInput({ onSearch }) {
  const [query, setQuery] = useState("");

  const handleChange = useCallback((event) => {
    setQuery(event.target.value);
    onSearch(event.target.value);
  }, [onSearch]);

  return <input value={query} onChange={handleChange} />;
}

To test this component, we can mock the onSearch function and verify it is called:

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

test('should call onSearch with input value', () => {
  const handleSearch = jest.fn();
  render(<SearchInput onSearch={handleSearch} />);

  const input = screen.getByRole('textbox');
  fireEvent.change(input, { target: { value: 'test' } });

  expect(handleSearch).toHaveBeenCalledWith('test');
});

Summary

When testing useEffect and useCallback, the focus is on how they impact component behavior and rendering. Tools like Jest and React Testing Library can help simulate external interactions, monitor function calls, and effectively validate the behavior of these Hooks.