Що тестувати, а що ні · fullstack.org.ua

fullstack.org.ua

Що тестувати, а що ні · fullstack.org.ua

jsx

// SearchForm.jsx
import { useState } from 'react';

export function SearchForm({ onSearch, isLoading = false }) {
  const [query, setQuery] = useState('');

  function handleSubmit(event) {
    event.preventDefault();

    const normalizedQuery = query.trim();

    if (!normalizedQuery) {
      return;
    }

    onSearch(normalizedQuery);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="search">Пошук</label>

      <input
        id="search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        disabled={isLoading}
      />

      <button type="submit" disabled={isLoading || !query.trim()}>
        {isLoading ? 'Пошук…' : 'Знайти'}
      </button>
    </form>
  );
}

jsx

// SearchForm.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { SearchForm } from './SearchForm';

describe('SearchForm', () => {
  it('передає очищений запит після відправлення форми', async () => {
    const user = userEvent.setup();
    const onSearch = vi.fn();

    render(<SearchForm onSearch={onSearch} />);

    const input = screen.getByRole('textbox', { name: 'Пошук' });
    const button = screen.getByRole('button', { name: 'Знайти' });

    await user.type(input, '  react testing  ');
    await user.click(button);

    expect(onSearch).toHaveBeenCalledOnce();
    expect(onSearch).toHaveBeenCalledWith('react testing');
  });

  it('не відправляє порожній запит', async () => {
    const user = userEvent.setup();
    const onSearch = vi.fn();

    render(<SearchForm onSearch={onSearch} />);

    const input = screen.getByRole('textbox', { name: 'Пошук' });
    await user.type(input, '   ');

    expect(screen.getByRole('button', { name: 'Знайти' })).toBeDisabled();

    await user.keyboard('{Enter}');

    expect(onSearch).not.toHaveBeenCalled();
  });

  it('блокує введення та кнопку під час пошуку', () => {
    const onSearch = vi.fn();

    render(<SearchForm onSearch={onSearch} isLoading />);

    expect(screen.getByRole('textbox', { name: 'Пошук' })).toBeDisabled();
    expect(screen.getByRole('button', { name: 'Пошук…' })).toBeDisabled();
  });
});

javascript

// formatPrice.test.js
import { describe, expect, it } from 'vitest';
import { formatPrice } from './formatPrice';

describe('formatPrice', () => {
  it('форматує суму в гривнях', () => {
    expect(formatPrice(1250, 'UAH')).toBe('1 250,00 грн');
  });
});