راهنمای جامع تست واکنش: از اصول اولیه تا تکنیک های پیشرفته

test('simple value comparison', () => {
  const value = 2 + 2;
  expect(value).toBe(4);

  // Fails for objects and arrays
  const obj1 = { a: 1 };
  const obj2 = { a: 1 };
  expect(obj1).not.toBe(obj2); // References differ
});

test('object deep equality', () => {
  const data = { name: 'John', age: 30 };
  expect(data).toEqual({ name: 'John', age: 30 });

  // Ignores undefined properties
  const partialData = { name: 'John', age: 30, email: undefined };
  expect(partialData).toEqual({ name: 'John', age: 30 });
});

test('strict object comparison', () => {
  const data = { name: 'John', age: 30 };
  const dataWithUndefined = { name: 'John', age: 30, email: undefined };

  // toStrictEqual is more strict
  expect(data).not.toStrictEqual(dataWithUndefined);
});

test('partial object matching', () => {
  const user = { 
    name: 'John', 
    age: 30, 
    address: { 
      city: 'New York', 
      country: 'USA' 
    } 
  };

  // Checks only specified properties
  expect(user).toMatchObject({
    name: 'John',
    address: { city: 'New York' }
  });
});

test('approximate value checks', () => {
  // Floating point comparisons
  expect(0.1 + 0.2).toBeCloseTo(0.3);

  // Array containment
  expect([1, 2, 3]).toContain(2);
  expect([1, 2, 3]).toEqual(expect.arrayContaining([1, 3]));
});

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

test('component rendering', () => {
  render(<MyComponent />);

  // Different query methods
  const elementByText = screen.getByText('Hello World');
  const elementByRole = screen.getByRole('button', { name: /submit/i });
});

test('synchronous queries', () => {
  render(<MyComponent />);

  // Throws error if not found
  const getByTextElement = screen.getByText('Exact Text');
  const getByRoleElement = screen.getByRole('button');

  // Multiple matches throw error
  // screen.getByText('Repeated Text') would fail
});

test('querying non-existent elements', () => {
  render(<MyComponent />);

  // Returns null instead of throwing
  const absentElement = screen.queryByText('Non-existent Text');
  expect(absentElement).toBeNull();
});

test('async rendering', async () => {
  render(<AsyncComponent />);

  // Waits for element to appear
  const asyncElement = await screen.findByText('Loaded');
  expect(asyncElement).toBeInTheDocument();

  // Can specify timeout
  const timeoutElement = await screen.findByText('Slow Content', 
    {}, 
    { timeout: 3000 }
  );
});

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

test('user interactions', async () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>Click me</Button>);

  const button = screen.getByText('Click me');
  fireEvent.click(button);

  expect(handleClick).toHaveBeenCalledTimes(1);
});

// Mocking entire modules
jest.mock('axios', () => ({
  get: jest.fn(() => Promise.resolve({ data: { users: [] } }))
}));

test('mocked API call', async () => {
  render(<UserList />);
  await screen.findByText('Users Loaded');
});

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

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(c => c + 1);
  return { count, increment };
}

test('useCounter hook', () => {
  const { result } = renderHook(() => useCounter());

  // Initial state
  expect(result.current.count).toBe(0);

  // State change
  act(() => {
    result.current.increment();
  });

  expect(result.current.count).toBe(1);
});

test('component snapshot', () => {
  const { asFragment } = render(<ComplexComponent />);
  expect(asFragment()).toMatchSnapshot();
});

import { MemoryRouter } from 'react-router-dom';

test('component with routing', () => {
  render(
    <MemoryRouter initialEntries={['/users']}>
      <App />
    </MemoryRouter>
  );

  expect(screen.getByText('User List')).toBeInTheDocument();
});