Valid skill

Skill alexngai/skill-tree/scraper/test/fixtures/valid-skill

Version control and evolution for AI agent skills — versioned storage, dynamic serving/loadouts, multi-agent git sync, and cross-repo federation.

Install

npx -y skills add alexngai/skill-tree --skill valid-skill

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Helps write and debug React component tests using React Testing Library. Use when writing unit tests for React components, debugging test failures, or setting up testing infrastructure.

SKILL.md

2.5 KB, as published. Nobody here has run it

React Testing Helper

A comprehensive skill for writing effective React component tests.

When to Use

Writing unit tests for React components
Debugging failing component tests
Setting up React Testing Library
Testing user interactions and async behavior

Quick Reference

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

// Basic render
render(<MyComponent prop="value" />);

// Query elements
screen.getByRole('button', { name: /submit/i });
screen.getByText(/welcome/i);
screen.getByTestId('my-element');

// User interactions
await userEvent.click(button);
await userEvent.type(input, 'hello');

// Async assertions
await waitFor(() => {
  expect(screen.getByText('loaded')).toBeInTheDocument();
});

Best Practices

Query by accessibility: Prefer getByRole, getByLabelText over getByTestId
Test behavior, not implementation: Focus on what users see and do
Use userEvent over fireEvent: More realistic user interactions
Avoid testing implementation details: Don't test state or internal methods

Common Patterns

Testing Forms

test('submits form with user data', async () => {
  const onSubmit = jest.fn();
  render(<LoginForm onSubmit={onSubmit} />);

  await userEvent.type(screen.getByLabelText(/email/i), '[email protected]');
  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
  await userEvent.click(screen.getByRole('button', { name: /submit/i }));

  expect(onSubmit).toHaveBeenCalledWith({
    email: '[email protected]',
    password: 'password123'
  });
});

Testing Async Components

test('loads and displays data', async () => {
  render(<DataLoader />);

  expect(screen.getByText(/loading/i)).toBeInTheDocument();

  await waitFor(() => {
    expect(screen.getByText(/data loaded/i)).toBeInTheDocument();
  });
});

Troubleshooting

Element not found: Use screen.debug() to see current DOM
Act warnings: Wrap state updates in act() or use waitFor
Stale queries: Re-query elements after state changes