React: компоненты, JSX и props

npm create vite@latest services-catalog -- --template react-ts
cd services-catalog
npm install
npm run dev

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

export type Category = 'hair' | 'nails' | 'brows'

export interface Service {
  id: string
  title: string
  category: Category
  durationMin: number
  priceFrom?: number // нет цены — «после консультации»
  features: string[]
  isNew?: boolean
}

export const categories: { id: Category; title: string }[] = [
  { id: 'hair', title: 'Волосы' },
  { id: 'nails', title: 'Ногти' },
  { id: 'brows', title: 'Брови' },
]

export const services: Service[] = [
  {
    id: 'haircut',
    title: 'Женская стрижка',
    category: 'hair',
    durationMin: 60,
    priceFrom: 9000,
    features: ['Консультация мастера', 'Мытьё и укладка'],
  },
  {
    id: 'coloring',
    title: 'Окрашивание',
    category: 'hair',
    durationMin: 180,
    features: ['Подбор оттенка', 'Уход после окрашивания'],
    isNew: true,
  },
  {
    id: 'manicure',
    title: 'Маникюр с покрытием',
    category: 'nails',
    durationMin: 90,
    priceFrom: 7000,
    features: [],
  },
]

import type { Service } from '../data/services.ts'

interface ServiceCardProps {
  service: Service
  currency?: string
}

export function ServiceCard({ service, currency = '₸' }: ServiceCardProps) {
  const { title, durationMin, priceFrom, features, isNew } = service

  return (
    <article className="card">
      <h3>
        {title}
        {isNew && <span className="badge">Новинка</span>}
      </h3>
      <p className="meta">
        {durationMin} мин ·{' '}
        {priceFrom !== undefined
          ? `от ${priceFrom} ${currency}`
          : 'цена после консультации'}
      </p>
      {features.length > 0 && (
        <ul>
          {features.map((feature) => (
            <li key={feature}>{feature}</li>
          ))}
        </ul>
      )}
    </article>
  )
}

import { ServiceCard } from './components/ServiceCard.tsx'
import { services } from './data/services.ts'

export function Mistakes() {
  return (
    <>
      <ServiceCard />
      <ServiceCard service={services[0]} curency="KZT" />
      <ServiceCard service={services[0]} currency={398} />
    </>
  )
}

$ npx tsc -b
src/Mistakes.tsx(7,8): error TS2741: Property 'service' is missing in type '{}' but required in type 'ServiceCardProps'.
src/Mistakes.tsx(8,42): error TS2322: Type '{ service: Service; curency: string; }' is not assignable to type 'IntrinsicAttributes & ServiceCardProps'.
  Property 'curency' does not exist on type 'IntrinsicAttributes & ServiceCardProps'. Did you mean 'currency'?
src/Mistakes.tsx(9,42): error TS2322: Type 'number' is not assignable to type 'string'.

import type { ReactNode } from 'react'

interface SectionProps {
  title: string
  children: ReactNode
}

export function Section({ title, children }: SectionProps) {
  return (
    <section className="section">
      <h2>{title}</h2>
      {children}
    </section>
  )
}

import { Section } from './components/Section.tsx'
import { ServiceList } from './components/ServiceList.tsx'
import { categories, services } from './data/services.ts'

function App() {
  return (
    <main>
      <h1>Услуги салона</h1>
      {categories.map((category) => (
        <Section key={category.id} title={category.title}>
          <ServiceList
            items={services.filter((service) => service.category === category.id)}
          />
        </Section>
      ))}
    </main>
  )
}

export default App

import type { Service } from '../data/services.ts'
import { ServiceCard } from './ServiceCard.tsx'

export function ServiceList({ items }: { items: Service[] }) {
  if (items.length === 0) {
    return <p className="empty">В этой категории пока нет услуг.</p>
  }

  return (
    <div className="grid">
      {items.map((service) => (
        <ServiceCard key={service.id} service={service} />
      ))}
    </div>
  )
}

stderr | src/App.test.tsx > каталог услуг > рисует по карточке на каждую услугу из массива
Each child in a list should have a unique "key" prop.

Check the render method of `ServiceList`. See https://react.dev/link/warning-keys for more information.

{features.length && (

$ npx vitest run
 FAIL  src/App.test.tsx > каталог услуг > выводит значок, цену и список по условию
AssertionError: expected …(3) to have a length of 2 but got 3

      Tests  1 failed | 2 passed (3)

npm install -D vitest jsdom @testing-library/react @testing-library/dom

/// <reference types="vitest/config" />
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    setupFiles: ['./src/test/setup.ts'],
  },
})

import { cleanup } from '@testing-library/react'
import { afterEach } from 'vitest'

// без globals: true Testing Library не очищает DOM сама — делаем это после каждого теста
afterEach(() => {
  cleanup()
})

import { render, screen, within } from '@testing-library/react'
import { describe, expect, it } from 'vitest'
import App from './App.tsx'
import { ServiceCard } from './components/ServiceCard.tsx'

describe('каталог услуг', () => {
  it('рисует по карточке на каждую услугу из массива', () => {
    render(<App />)
    expect(screen.getAllByRole('article')).toHaveLength(3)
  })

  it('показывает заглушку для категории без услуг', () => {
    render(<App />)
    expect(screen.getByText('В этой категории пока нет услуг.')).toBeTruthy()
  })

  it('выводит значок, цену и список по условию', () => {
    render(
      <ServiceCard
        service={{
          id: 'test',
          title: 'Тестовая услуга',
          category: 'nails',
          durationMin: 30,
          features: [],
          isNew: true,
        }}
      />,
    )
    const card = screen.getByRole('article')
    expect(within(card).getByText('Новинка')).toBeTruthy()
    expect(within(card).getByText('30 мин · цена после консультации')).toBeTruthy()
    expect(within(card).queryByRole('list')).toBeNull()
    expect(card.childNodes).toHaveLength(2) // h3 и p — без лишнего «0»
  })
})

$ npm run build

> services-catalog@0.0.0 build
> tsc -b && vite build

vite v8.3.4 building client environment for production...
transforming...
✓ 20 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                   0.46 kB │ gzip:  0.29 kB
dist/assets/index-DLgvb7S-.css    0.41 kB │ gzip:  0.27 kB
dist/assets/index-CT4aR44L.js   221.12 kB │ gzip: 69.42 kB

✓ built in 126ms

$ npm test

> services-catalog@0.0.0 test
> vitest run

 RUN  v5.0.3 …/services-catalog

 Test Files  1 passed (1)
      Tests  3 passed (3)