[Feature Request] Add unit tests for all 20 components using Vitest and React Testing Library — vitest.shims.d.ts is already present but no tests exist

[prince-pokharna]

Summary

The repository already contains vitest.shims.d.ts, confirming that Vitest was set up as the intended test framework. However, no actual test files (.test.tsx or .spec.tsx) exist anywhere in the src/ directory. With 287 stars, an npm-published package, and 31 active forks, the complete absence of unit tests is a meaningful gap — every component change merged into main is untested, which risks publishing regressions to npm consumers.

Problem

• vitest.shims.d.ts is present but no test files have been written for any of the 20 components.
• There is no vitest.config.ts or test script defined in package.json (or if one exists, it runs nothing because no test files are present).
• The library is published to npm as sketchbook-ui. A regression in Button, Modal, Toast, or any other widely-used component would reach all downstream consumers silently.
• Contributors adding new components or modifying existing ones have no automated feedback on whether their changes break existing behaviour.
• With 56 open PRs and 49 issues, the project has significant contributor activity — the absence of tests increases the probability of a bad merge going unnoticed.

Impact

• Props regressions (e.g. a colors prop being ignored, a disabled Button still firing onClick) ship to npm without detection.
• New contributors adding components have no test template to follow, leading to inconsistent quality.
• The CI workflow cannot enforce test coverage as a PR gate.

Proposed Solution

I would like to add a foundational test suite covering the most critical components, with a test template that other contributors can follow when adding new components.

Example — src/components/Button/Button.test.tsx:

import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import { Button } from "./Button";

describe("Button", () => {
  it("renders children correctly", () => {
    render(<Button>Click me</Button>);
    expect(screen.getByRole("button", { name: /click me/i })).toBeInTheDocument();
  });

  it("calls onClick when clicked", () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByRole("button"));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it("does not call onClick when disabled", () => {
    const handleClick = vi.fn();
    render(<Button disabled onClick={handleClick}>Click me</Button>);
    fireEvent.click(screen.getByRole("button"));
    expect(handleClick).not.toHaveBeenCalled();
  });

  it("applies custom colors prop to inline style", () => {
    render(<Button colors={{ bg: "#ff0000", stroke: "#000", text: "#fff" }}>Colored</Button>);
    const btn = screen.getByRole("button");
    expect(btn).toHaveStyle({ backgroundColor: "#ff0000" });
  });
});

vitest.config.ts (if not already present):

import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: ["./vitest.setup.ts"],
  },
});

vitest.setup.ts:

import "@testing-library/jest-dom";

Scope of this PR:

• vitest.config.ts (if absent).
• vitest.setup.ts with @testing-library/jest-dom import.
• test script added to package.json: "test": "vitest run".
• Test files for: Button, Input, Modal, Toast, Checkbox, Switch, Accordion — the 7 highest-interaction components.
• A TESTING.md guide explaining the testing conventions for contributors adding new components.

Could you please assign this issue to me?

Labels: enhancement, testing, help wanted, GSSoC 2026

[prince-pokharna]

Hey @siddu-k,
Please assign it to me under GSSoC 2026,
/claim /assign /claim-assignment