Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Set up component tests with happy-dom and Testing Library

Abierto
  • ¿Algo no está bien?
#206 2 comentarios 0 reacciones 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@Bl1ckxy ya está trabajando en esto.

Desde el 20/10/2026.

  • #227 de @Bl1ckxy — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
67/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, testing

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1
Forks
9
Merge medio
10 h 24 min
PR fusionados (30 d)
93

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/toolbelt

Todos los issues de codercops/toolbelt

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.