SolidJS

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

Fișierul de intrare

Fișierul componentei este App.jsx. Fișierul main.jsx (preîncărcat, doar în citire) montează componenta ta App în pagină folosind solid-js/web:

import { render } from 'solid-js/web';
import App from './App';

render(() => <App />, document.getElementById('root'));

Versiune

Rulează pe Node.js v20.0.0

Limbaje suportate

Javascript

Framework de testare

Vitest

Mementouri speciale și detalii de implementare

• Testele sunt scrise cu @solidjs/testing-library, care împachetează componentele SolidJS pentru o randare prietenoasă cu aserțiunile.
• render acceptă o funcție care returnează JSX (() => <App />) — acest lucru corespunde modului în care SolidJS montează componentele și oferă testului aceeași rădăcină reactivă pe care ar avea-o aplicația reală.
• Folosește primitive SolidJS (createSignal, createEffect, createMemo) în loc de hook-uri în stil React — acestea par similare, dar se comportă diferit (reactivitate fin granulară, fără re-randări).

Exemplu cu @solidjs/testing-library:

import { render, screen } from '@solidjs/testing-library';
import App from './App';

describe('App', () => {
  test("says 'Hello, World!'", () => {
    render(() => <App />);
    const node = screen.queryByText('Hello, World!');
    expect(node).toBeInTheDocument();
  });
});

Biblioteci incluse

• solid-js
• @solidjs/testing-library
• @testing-library/jest-dom
• @testing-library/user-event
• jsdom
• vite
• vite-plugin-solid
• vitest

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: Vitest + @solidjs/testing-library
• Randează cu o funcție: render(() => <App />). Matcherii jest-dom sunt înregistrați de configurarea testelor.
• Solid actualizează DOM-ul sincron, așa că aserțiunile pot urma direct după fireEvent.click.
• Denumește fișierele de test *.spec.jsx.

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

Cum să depanezi

Depanarea codului SolidJS este similară cu depanarea JavaScript. Folosește console.log() pentru a inspecta valorile semnalelor în interiorul createEffect sau direct în interiorul expresiilor JSX.

Pași pentru depanare folosind loguri în consolă

1. Identifică zona cu probleme: Localizează componenta sau semnalul pe care vrei să le inspectezi.

2. Introdu instrucțiuni console.log(): Înregistrează valorile semnalelor în interiorul createEffect pentru ca acestea să ruleze din nou ori de câte ori semnalul se modifică, sau înregistrează-le direct în JSX.

3. Verifică rezultatul din secțiunea Results Output a testelor tale

4. Folosește pictograma de depanare din zona Preview: Fă clic pe pictograma de depanare (Debug) din zona Preview pentru a verifica rezultatele din consolă sau deschide consola browserului tău.

5. Analizează rezultatul: Compară logurile cu interfața grafică randată pentru a depista semnale învechite sau actualizări lipsă.

Iată un exemplu despre cum să folosești console.log() pentru depanare în SolidJS:

import { createSignal, createEffect } from 'solid-js';

export default function Counter() {
  const [count, setCount] = createSignal(0);

  createEffect(() => {
    console.log('count is now', count()); // Log every time count changes
  });

  const handleClick = () => {
    console.log('Button clicked, current count:', count());
    setCount(count() + 1);
  };

  return <button onClick={handleClick}>{count()}</button>;
}