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

> Learn how to run Kaneo web app tests easily. This guide covers Vitest and jsdom, providing clear commands for efficient testing within the usekaneo/kaneo repository.

- Repository: [kaneo.app/kaneo](https://github.com/usekaneo/kaneo)
- Tags: how-to-guide
- Published: 2026-08-09

---

**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`](https://github.com/usekaneo/kaneo/blob/main/apps/web/package.json).

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

```bash
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:

```bash
pnpm --filter @kaneo/web test

```

This invokes `vitest run --config vitest.config.ts` as specified in [`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/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:

```bash
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`](https://github.com/usekaneo/kaneo/blob/main/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`](https://github.com/usekaneo/kaneo/blob/main/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:

```bash
pnpm --filter @kaneo/web test:watch

```

This executes `vitest --config vitest.config.ts` (line 13 of [`apps/web/package.json`](https://github.com/usekaneo/kaneo/blob/main/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`](https://github.com/usekaneo/kaneo/blob/main/apps/web/vitest.config.ts) with jsdom environment and global setup at [`apps/web/src/test/setup.ts`](https://github.com/usekaneo/kaneo/blob/main/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`](https://github.com/usekaneo/kaneo/blob/main/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`](https://github.com/usekaneo/kaneo/blob/main/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`](https://github.com/usekaneo/kaneo/blob/main/use-task-filters-with-labels-support.test.tsx).