Română

English

Română

English

Aspect

React ​

Ar trebui să creezi o componentă funcțională numită App ca punct principal de intrare al aplicației tale React. Codul tău React ar trebui verificat folosind ESLint cu configurația recomandată pentru React.

Fișierul de pornire ​

Fișierul de pornire pentru acest șablon trebuie să fie unul dintre următoarele: main.jsx sau index.jsx. Primul găsit este utilizat ca punct de pornire.

Versiune ​

Rulează pe Node.js v20.0.0

Limbi acceptate ​

Javascript

Framework de testare ​

Jest

Precizări speciale și detalii de implementare ​

  • React Testing Library, o bibliotecă pentru a ajuta la testarea componentelor React. Este construită peste DOM Testing Library prin adăugarea de API-uri pentru lucrul cu componentele React.

Exemplu cu React Testing Library: ​

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

import App from './App.jsx';

afterEach(cleanup);

describe('App', () => {
  test('Should display "Hello World!"', () => {
    render(<App />);
    expect(screen.getByText("Hello World!")).toBeInTheDocument();
  });
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești hook-urile și context API din React pentru gestionarea stării și efecte secundare.

Biblioteci incluse ​

Provocări write-tests ​

Acest șablon acceptă provocări write-tests. Soluția de referință este deja scrisă, iar tu scrii testele: acestea trebuie să treacă pe soluția de referință și să prindă fiecare variantă cu bug-uri ascunsă. Test îți rulează testele doar pe soluția de referință, iar Verify tests (Verifică testele) și Submit (Trimite) le rulează și pe variantele cu bug-uri ascunse. Citește Rezolvarea unei provocări write-tests pentru întregul flux.

  • Runner de teste: Jest + @testing-library/react
  • Poți folosi JSX în fișierele *.spec.js: șablonul le compilează cu preset-ul React din Babel.
  • Interoghează după rol (getByRole('button', { name: 'Increment' })) ca testele să urmeze ce vede utilizatorul, apoi folosește fireEvent.click și verifică noul text.
  • Apelează cleanup în afterEach ca să nu rămână montate componentele din testele anterioare.

Un exemplu complet găsești în Exemple de write-tests după șablon.

Cum se depanează ​

Depanarea codului React este esențială pentru identificarea și rezolvarea problemelor. Utilizarea instrucțiunilor console.log() poate ajuta în acest proces.

Pași pentru depanare folosind log-uri în consolă ​

  1. Identifică zona cu probleme: Identifică cu precizie componenta sau funcția din codul tău React unde suspectezi că se află problema.

  2. Introdu instrucțiuni console.log(): Plasează strategic instrucțiuni console.log() înainte și după codul suspectat pentru a afișa valorile variabilelor și a urmări fluxul de execuție.

  3. Verifică rezultatele afișate ale testelor tale

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona de Previzualizare pentru a verifica output-ul consolei sau verifică consola browserului tău.

  5. Analizează rezultatele: Examinează output-ul înregistrat în consolă pentru a înțelege fluxul de execuție al aplicației tale React și pentru a identifica potențialele probleme.

Iată un exemplu de utilizare a console.log() pentru depanare în React:

jsx
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log('Button clicked!'); // Log button click
    setCount(count + 1);
  };

  console.log('Current count:', count); // Log current count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;