Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Set up component tests with happy-dom and Testing Library

Aperta
  • Qualcosa non va?
#206 2 commenti 0 reazioni 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@Bl1ckxy ci sta già lavorando.

Dal 20/10/2026.

  • #227 di @Bl1ckxy — aperta

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
67/100
Tipo di issue
Funzionalità
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
react, typescript
Ambito
frontend, testing

Direzione di ricerca

Start with vitest.config.ts, package.json, and CONTRIBUTING.md; check how lib/ tests are discovered and run. Add component test discovery and a happy-dom environment while keeping lib/ tests in node, then test components/shared/CopyButton.tsx inside ToastProvider from components/shared/Toast.tsx. Done when the test verifies clipboard writing and the “Copied” label, and the requested npm checks pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

enhancement hacktoberfest help wanted testing

Tests only cover lib/ today. vitest.config.ts runs everything in the node environment and only picks up lib/**/*.test.ts, and there's no DOM library or Testing Library in package.json. So a fix inside a component can't come with a test that fails before the fix, like the invoice reset fixed in #201 or the theme toggle hydration error in #193.

What to do

  • Add happy-dom, @testing-library/react and @testing-library/dom as dev dependencies (chatcops's widget tests use happy-dom too)
  • Run component tests in happy-dom and keep the lib/ tests in node, for example with Vitest projects or a // @vitest-environment happy-dom comment at the top of each component test
  • Pick up *.test.tsx files under components/ and app/ as well
  • Write one real test to show it works, for components/shared/CopyButton.tsx: clicking it calls navigator.clipboard.writeText with its value and the label changes to "Copied". It uses useToast, so render it inside ToastProvider from components/shared/Toast.tsx.
  • Add a line next to the one about lib/__tests__/ in CONTRIBUTING.md (line 94) saying where component tests go

Acceptance criteria

  • npm run test runs the lib/ tests and the new component test, so CI runs both
  • The lib/ tests still run in node
  • The CopyButton test fails if handleCopy stops calling navigator.clipboard.writeText
  • package-lock.json is updated with npm install on Node 22, and only the new packages are added to it
  • npm run lint, npm run test and npm run build pass

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #206 in the description.

Lingua principale
TypeScript
Stelle
1
Fork
9
Merge medio
10h 24m
PR unite (30g)
93

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di codercops/toolbelt

Tutte le issue di codercops/toolbelt

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.