Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Set up component tests with happy-dom and Testing Library

Đã đóng
  • Có gì không ổn?
#206 2 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@Bl1ckxy đang làm issue này rồi.

Từ ngày 20/10/2026.

  • #227 của @Bl1ckxy — đã merge

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
67/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
frontend, testing

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
1
Fork
9
Merge trung bình
8 giờ 8 phút
Pull request đã merge (30 ngày)
155

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/toolbelt

Tất cả issue của codercops/toolbelt

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.