JavaScript/TypeScript Testing Skill

When to Activate

Activate this skill when:

• Writing JavaScript or TypeScript tests

• Testing Svelte, React, or Vue components

• Setting up Vitest or Jest configuration

• Working with mocks, spies, or test utilities

• Running tests or checking coverage

Framework Selection

Use Case Framework

SvelteKit, Vite projects Vitest (recommended)

Non-Vite projects, React Native Jest

Quick Commands

Vitest

npx vitest # Watch mode npx vitest run # Single run (CI) npx vitest run --coverage npx vitest --ui # Visual UI

Jest

pnpm test pnpm test --watch pnpm test --coverage

Test Structure: AAA Pattern

import { describe, it, expect, beforeEach } from 'vitest';

describe('UserService', () => { let userService: UserService;

beforeEach(() => {
    userService = new UserService();
});

it('should create a new user with valid data', () => {
    // Arrange
    const email = 'test@example.com';
    const password = 'secure_pass123';

    // Act
    const result = userService.register(email, password);

    // Assert
    expect(result.success).toBe(true);
    expect(result.user.email).toBe(email);
});

});

Vitest Setup (SvelteKit)

// vite.config.ts import { defineConfig } from 'vitest/config'; import { sveltekit } from '@sveltejs/kit/vite';

export default defineConfig({ plugins: [sveltekit()], test: { include: ['src/**/*.{test,spec}.{js,ts}'], globals: true, environment: 'jsdom', setupFiles: ['./src/tests/setup.ts'], } });

Mocking

Vitest

import { vi } from 'vitest';

vi.mock('./api', () => ({ fetchUser: vi.fn() }));

vi.mocked(fetchUser).mockResolvedValue({ id: 1, name: 'John' });

Jest

jest.mock('./api', () => ({ fetchUser: jest.fn() }));

Component Testing (Svelte)

import { render, screen, fireEvent } from '@testing-library/svelte'; import Counter from './Counter.svelte';

it('should increment count on click', async () => { render(Counter, { props: { initialCount: 0 } });

const button = screen.getByRole('button', { name: /increment/i });
await fireEvent.click(button);

expect(screen.getByText('Count: 1')).toBeInTheDocument();

});

Common Assertions

// Equality expect(value).toBe(expected); // Strict === expect(value).toEqual(expected); // Deep equality

// Truthiness expect(value).toBeTruthy(); expect(value).toBeNull();

// Arrays/Objects expect(array).toContain(item); expect(obj).toHaveProperty('key');

// Exceptions expect(() => fn()).toThrow('error');

// Async await expect(promise).resolves.toBe(value); await expect(promise).rejects.toThrow();

Query Priority (Testing Library)

• getByRole

• Accessible queries (best)

• getByLabelText

• Form fields

• getByPlaceholderText

• Inputs

• getByText

• Non-interactive elements

• getByTestId

• Last resort

Directory Structure

src/ ├── lib/ │ ├── components/ │ │ ├── Button.svelte │ │ └── Button.test.ts │ └── utils/ │ ├── format.ts │ └── format.test.ts └── tests/ ├── setup.ts └── integration/

SvelteKit Testing

Load Functions

import { load } from './+page.server';

it('should fetch posts', async () => { const mockFetch = vi.fn().mockResolvedValue({ json: () => Promise.resolve([{ id: 1 }]) });

const result = await load({ fetch: mockFetch } as any);
expect(result.posts).toHaveLength(1);

});

Form Actions

import { actions } from './+page.server';

it('should validate login', async () => { const formData = new FormData(); formData.set('email', 'test@example.com');

const request = new Request('http://localhost', {
    method: 'POST',
    body: formData
});

const result = await actions.default({ request } as any);
expect(result.success).toBe(true);

});

Related Resources

See AgentUsage/testing_javascript.md for complete documentation including:

• Jest configuration

• Async testing patterns

• SvelteKit-specific patterns

• CI/CD integration