Agent skill

testing

JavaScript testing with Jest, Vitest, and Testing Library for comprehensive test coverage.

View SKILL.md on GitHub Repository
Stars 1
Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/pluginagentmarketplace/custom-plugin-javascript/tree/main/skills/testing

SKILL.md

JavaScript Testing Skill

Quick Reference Card

Vitest/Jest Basics

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

describe('Calculator', () => {
  it('adds numbers', () => {
    expect(add(2, 3)).toBe(5);
  });

  it('handles edge cases', () => {
    expect(add(0, 0)).toBe(0);
    expect(add(-1, 1)).toBe(0);
  });
});

Common Matchers

javascript
// Equality
expect(value).toBe(exact);
expect(value).toEqual(deepEqual);
expect(value).toStrictEqual(strictDeep);

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

// Numbers
expect(num).toBeGreaterThan(3);
expect(num).toBeLessThanOrEqual(10);
expect(float).toBeCloseTo(0.3, 5);

// Strings
expect(str).toMatch(/pattern/);
expect(str).toContain('substring');

// Arrays
expect(arr).toContain(item);
expect(arr).toHaveLength(3);

// Errors
expect(() => fn()).toThrow();
expect(() => fn()).toThrow('message');

Mocking

javascript
// Mock function
const mockFn = vi.fn();
mockFn.mockReturnValue(42);
mockFn.mockResolvedValue(data);
mockFn.mockRejectedValue(error);

// Verify calls
expect(mockFn).toHaveBeenCalled();
expect(mockFn).toHaveBeenCalledWith(arg);
expect(mockFn).toHaveBeenCalledTimes(2);

// Mock module
vi.mock('./api', () => ({
  fetchData: vi.fn().mockResolvedValue({ data: [] })
}));

// Spy
const spy = vi.spyOn(obj, 'method');

Async Testing

javascript
it('handles async', async () => {
  const data = await fetchData();
  expect(data).toBeDefined();
});

it('handles promises', async () => {
  await expect(fetchData()).resolves.toEqual({ id: 1 });
  await expect(failingFn()).rejects.toThrow('Error');
});

React Testing Library

javascript
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

it('renders and interacts', async () => {
  render(<Button onClick={handleClick}>Click me</Button>);

  // Query
  const btn = screen.getByRole('button', { name: /click/i });
  expect(btn).toBeInTheDocument();

  // Interact
  await userEvent.click(btn);
  expect(handleClick).toHaveBeenCalled();
});

Test Setup

javascript
// vitest.config.ts
export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    coverage: {
      provider: 'v8',
      thresholds: { lines: 80 }
    }
  }
});

Troubleshooting

Common Issues

Problem Symptom Fix
Test timeout Hangs Check async/await
Mock not working Real fn called Verify mock setup
Flaky test Random failures Add waits, fix race
Coverage low Under threshold Add edge cases

Debug Checklist

javascript
// 1. Isolate test
it.only('specific test', () => {});

// 2. Log state
console.log('Value:', variable);

// 3. Debug DOM
screen.debug();

// 4. Check mocks
console.log(mockFn.mock.calls);

Production Patterns

Test Organization

javascript
describe('UserService', () => {
  describe('create', () => {
    it('creates user with valid data', () => {});
    it('throws on invalid email', () => {});
  });

  describe('delete', () => {
    it('removes existing user', () => {});
    it('throws if not found', () => {});
  });
});

Test Factories

javascript
function createUser(overrides = {}) {
  return {
    id: 1,
    name: 'Test User',
    email: 'test@test.com',
    ...overrides
  };
}

Related

  • Agent 08: Testing & Quality (detailed learning)
  • Skill: debugging: Debug techniques
  • Skill: ecosystem: CI setup

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

pluginagentmarketplace/custom-plugin-javascript

debugging

JavaScript debugging techniques using DevTools, Node.js debugger, and advanced troubleshooting.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

patterns

JavaScript design patterns and architectural best practices.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

asynchronous

Master asynchronous JavaScript patterns including callbacks, promises, async/await, event loop mechanics, and real-world async patterns.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

dom-apis

DOM manipulation and browser APIs including element selection, events, storage, fetch, and modern Web APIs.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

ecosystem

JavaScript ecosystem including npm, build tools (Webpack, Vite), testing (Jest, Vitest), linting, and CI/CD integration.

1 0
Explore
pluginagentmarketplace/custom-plugin-javascript

functions

Advanced function patterns including declaration styles, closures, scope chains, hoisting, and this binding. Master function composition and advanced techniques.

1 0
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results