الگوی آزمایش HRR React – انجمن DEV

test('when fetch: should set loading and users', async () => {
  // Arrange
  const myMockFetch = jest.fn().mockResolvedValue([{ id: '1', name: 'User 1' }]);
  const { result } = renderHook(() => useFetchUsers(myMockFetch));

  // Assert initial state
  expect(result.current.isLoading).toBe(false);
  expect(result.current.users).toEqual([]);

  // Act
  await act(async () => {
    await result.current.fetch();
  });

  // Assert final state
  expect(myMockFetch).toHaveBeenCalledTimes(1);
  expect(result.current.isLoading).toBe(false);
  expect(result.current.users).toEqual([{ id: '1', name: 'User 1' }]);
});

test('when fetch: should set loading and users', async () => {
    // Arrange
    fetchUsers = renderUseFetchUsers();

    expect(fetchUsers.isLoading).toBe(false);
    expect(fetchUsers.users).toEqual([]);

    // Act
    await fetchUsers.fetch();

    // Assert
    expect(myMockFetch).toHaveBeenCalledTimes(1);
    expect(fetchUsers.isLoading).toBe(false);
    expect(fetchUsers.users).toEqual([{ id: '1', name: 'User 1' }]);
});

// useFetchUsers.ts
import React, { useState } from 'react';

export interface User {
    id: string;
    name: string;
}

type FetchUsersFn = () => Promise<User[]>;

export interface UseFetchUsersResult {
    isLoading: boolean;
    users: User[];
    fetch: () => Promise<void>;
}

const useFetchUsers = (fetchUsers: FetchUsersFn, messaging: (message: string) => void): UseFetchUsersResult => {
    const [isLoading, setIsLoading] = useState(false);
    const [users, setUsers] = useState<User[]>([]);

    const fetch = async () => {
        setIsLoading(true);
        try {
            const users = await fetchUsers();
            setUsers(users);
        } catch {
            messaging('There was an issue fetching users');
        } finally {
            setIsLoading(false);
        }
    };

    return {
        isLoading,
        users,
        fetch,
    };
};

export default useFetchUsers;

// UseFetchUsersRenderResult.ts
import { act } from 'react-dom/test-utils';
import { UseFetchUsersResult } from '../../useFetchUsers';

type HookRenderResult = { current: UseFetchUsersResult };

class UseFetchUsersRenderResult implements UseFetchUsersResult {
    constructor(private renderResult: HookRenderResult) {}

    get isLoading() {
        return this.renderResult.current.isLoading;
    }

    get users() {
        return this.renderResult.current.users;
    }

    async fetch() {
        await act(async () => {
            await this.renderResult.current.fetch();
        });
    }
}

export default UseFetchUsersRenderResult;

// useFetchUsers.test.ts
import { renderHook } from '@testing-library/react';
import useFetchUsers, { User } from '../useFetchUsers';
import UseFetchUsersRenderResult from './helpers/UseFetchUsersRenderResult';

const DEFAULT_ARGS = Object.freeze({
    fetchUsers: jest.fn(),
    messaging: jest.fn(),
});

const renderUseFetchUsers = (fetchUsers = DEFAULT_ARGS.fetchUsers, messaging = DEFAULT_ARGS.messaging): UseFetchUsersRenderResult => {
    const { result } = renderHook(() => useFetchUsers(fetchUsers, messaging));
    return new UseFetchUsersRenderResult(result);
};

describe('useFetchUsers', () => {
    let fetchUsers: UseFetchUsersRenderResult;

    afterEach(() => {
        jest.clearAllMocks();
    });

    test('when initializing: should have correct default result', async () => {
        // Arrange, act
        fetchUsers = renderUseFetchUsers();

        // Assert
        expect(fetchUsers.isLoading).toBe(false);
        expect(fetchUsers.users).toEqual([]);
    });

    test('when fetch: should call fetchUsers arg', async () => {
        // Arrange
        fetchUsers = renderUseFetchUsers();

        // Act
        await fetchUsers.fetch();

        // Assert
        expect(DEFAULT_ARGS.fetchUsers).toHaveBeenCalledTimes(1);
    });

    test('when fetch: should set loading and users', async () => {
        // Arrange
        const myMockFetch = jest.fn().mockImplementation(
            () =>
                new Promise<User[]>((resolve) => {
                    setTimeout(() => {
                        resolve([{ id: '1', name: 'User 1' }]);
                    }, 50);
                })
        );
        fetchUsers = renderUseFetchUsers(myMockFetch);

        // Act
        await fetchUsers.fetch();

        // Assert
        expect(fetchUsers.isLoading).toBe(false);
        expect(fetchUsers.users).toEqual([{ id: '1', name: 'User 1' }]);
    });

    test('when fetch: should set loading and call messaging on error', async () => {
        // Arrange
        const myMockFetch = jest.fn().mockRejectedValueOnce(new Error('An error occurred'));
        fetchUsers = renderUseFetchUsers(myMockFetch);

        // Act
        await fetchUsers.fetch();

        // Assert
        expect(DEFAULT_ARGS.messaging).toHaveBeenCalledTimes(1);
        expect(DEFAULT_ARGS.messaging).toHaveBeenCalledWith('There was an issue fetching users');
    });
});

async fetch() {
  await act(async () => {
    await this.renderResult.current.fetch();
  });
}

class UseFetchUsersRenderResult implements UseFetchUsersResult {
    private fetchPromise: Promise<void> | null = null;

    // ...other code

    async fetch() {
        await act(async () => {
            await this.renderResult.current.fetch();
        });
    }

    startFetch() {
        act(() => {
            this.fetchPromise = this.renderResult.current.fetch();
        });
    }

    async finishFetch() {
        if (!this.fetchPromise) throw new Error('fetch() not started.');
        await act(async () => {
            await this.fetchPromise;
        });
        this.fetchPromise = null;
    }
}

test('should show isLoading during fetch', async () => {
  const fetchUsers = renderUseFetchUsers();

  // Kick off fetch
  fetchUsers.startFetch();

  // Immediately check transitional state
  expect(fetchUsers.isLoading).toBe(true);

  // Wait for completion
  await fetchUsers.finishFetch();

  // Post-fetch assertions
  expect(fetchUsers.isLoading).toBe(false);
});

// useFetchUsers.ts
import { doFetch } from './doFetch';

const useFetchUsers = (fetchUsers: FetchUsersFn, messaging: (message: string) => void): UseFetchUsersResult => {
    const [users, setUsers] = useState<User[]>([]);
    const [isLoading, setIsLoading] = useState(false);

    const fetch = async () => {
        await doFetch({
            setIsLoading,
            fetchUsers,
            setUsers,
            messaging,
        });
    };

    return {
        users,
        isLoading,
        fetch,
    };
};

// doFetch.test.ts
import { doFetch } from './doFetch';

const DEFAULT_ARGS = Object.freeze({
    setIsLoading = jest.fn(),
    fetchUsers = jest.fn(),
    setUsers = jest.fn(),
    messaging = jest.fn()
});

describe('useFetchUsers - doFetch', () => {
  afterEach(() => {
      jest.clearAllMocks();
  });

  it('should set loading, fetch data, set users, and unset loading on success', async () => {
    // Arrange
    const mockUsers = [{ id: '1', name: 'User 1' }];
    fetchUsers.mockResolvedValue(mockUsers);

    // Act
    await doFetch({
      setIsLoading,
      fetchUsers,
      setUsers,
      messaging,
    });

    // Assert
    expect(DEFAULT_ARGS.setIsLoading).toHaveBeenNthCalledWith(1, true);  // first call
    expect(DEFAULT_ARGS.fetchUsers).toHaveBeenCalledTimes(1);
    expect(DEFAULT_ARGS.setUsers).toHaveBeenCalledWith(mockUsers);
    expect(DEFAULT_ARGS.messaging).not.toHaveBeenCalled();
    expect(DEFAULT_ARGS.setIsLoading).toHaveBeenNthCalledWith(2, false); // final call
  });
});