How to Run Kaneo Web App Tests: Complete Vitest and jsdom Guide

To run Kaneo web app tests, execute pnpm --filter @kaneo/web test from the repository root after installing dependencies with pnpm install.

The Kaneo project management platform uses a React-based frontend with a comprehensive testing setup. This guide explains how to run kaneo web app tests using the Vitest framework configured with jsdom environment and Testing Library utilities according to the usekaneo/kaneo source code.

Prerequisites and Installation

Before executing tests, install dependencies across the pnpm monorepo. The web application requires Vitest, jsdom, and React Testing Library packages defined in apps/web/package.json.

1. Clone the repository and navigate to the root directory.
2. Install all workspace dependencies:

pnpm install

This command installs testing dependencies including vitest, jsdom, and @testing-library/react for the web workspace.

Execute the Test Suite

To run kaneo web app tests once and exit with a status code, filter the command to the web workspace:

pnpm --filter @kaneo/web test

This invokes vitest run --config vitest.config.ts as specified in apps/web/package.json (line 12). Vitest discovers files matching the src/**/*.test.{ts,tsx} pattern and executes them in the jsdom environment defined in the configuration.

Optional Type Checking

While Vitest compiles TypeScript on-the-fly, verify type safety before testing:

pnpm typecheck

This step catches type errors that could cause runtime test failures.

Configuration and Environment Setup

The testing behavior is controlled by apps/web/vitest.config.ts. This configuration file specifies three critical settings:

• Environment: environment: "jsdom" (line 8) simulates browser DOM APIs for component testing
• Setup Files: setupFiles: ["./src/test/setup.ts"] (line 9) loads global utilities before test execution
• Test Pattern: include: ["src/**/*.test.{ts,tsx}"] (line 10) locates all test files co-located with source code

The global setup file at apps/web/src/test/setup.ts initializes jest-dom matchers and configures Testing Library utilities required for React component assertions.

Watch Mode for Development

For continuous feedback during test-driven development, run tests in watch mode:

pnpm --filter @kaneo/web test:watch

This executes vitest --config vitest.config.ts (line 13 of apps/web/package.json), monitoring the src directory for changes and re-running affected tests automatically.

Summary

• Install dependencies with pnpm install at the repository root to access Vitest and testing utilities
• Run tests once using pnpm --filter @kaneo/web test to validate code correctness before commits
• Use watch mode via pnpm --filter @kaneo/web test:watch for immediate feedback during development
• Configuration resides in apps/web/vitest.config.ts with jsdom environment and global setup at apps/web/src/test/setup.ts
• Test files follow the *.test.{ts,tsx} naming convention within the apps/web/src directory

Frequently Asked Questions

What testing framework does Kaneo use for its web application?

Kaneo uses Vitest as the test runner with jsdom as the environment for simulating browser behavior. The configuration in apps/web/vitest.config.ts enables React component testing through @testing-library/react and jest-dom matchers loaded via apps/web/src/test/setup.ts.

Do I need to build the TypeScript project before running tests?

No, building is not required because Vitest compiles TypeScript on-the-fly using esbuild. However, running pnpm typecheck validates type safety separately and catches interface mismatches that might not trigger runtime errors during test execution.

How do I run a specific test file instead of the entire suite?

Append the file path to the test command: pnpm --filter @kaneo/web test -- src/hooks/use-board-sort.test.tsx. Replace the path with your specific test file location relative to the apps/web directory to execute only that test module.

Where are the test files located in the Kaneo repository?

Test files are co-located with implementation code throughout apps/web/src/ and identified by the .test.{ts,tsx} extension. For example, hook tests reside in apps/web/src/hooks/ alongside their source files, following the pattern demonstrated in use-task-filters-with-labels-support.test.tsx.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}