{
  "skill_name": "react-testing",
  "evals": [
    {
      "id": 1,
      "prompt": "Write a test for my UserCard component that shows the user's name and email.",
      "expected_output": "Use RTL with AAA pattern: render(<UserCard user={{ name: 'Alice', email: 'alice@test.com' }} />). Assert: expect(screen.getByRole('heading', { name: 'Alice' })).toBeInTheDocument(). Prefer getByRole (accessibility-driven) over getByTestId. Test behavior, not implementation — don't check internal state.",
      "assertions": [
        { "type": "contains", "value": "getByRole" },
        { "type": "contains", "value": "render" }
      ]
    },
    {
      "id": 2,
      "prompt": "My tests are calling real APIs and sometimes fail due to network issues.",
      "expected_output": "Violation: No real network usage in tests. Use MSW (Mock Service Worker) to intercept API calls. Create server.ts with handlers: rest.get('/api/users', (req, res, ctx) => res(ctx.json([...]))). Add server.listen() in setup, server.resetHandlers() in afterEach, server.close() in afterAll. Tests never call real APIs.",
      "assertions": [
        { "type": "contains", "value": "MSW" },
        { "type": "contains", "value": "handler" }
      ]
    },
    {
      "id": 3,
      "prompt": "I want to test that my form submits correctly when the user fills in all fields.",
      "expected_output": "Use userEvent (async) for realistic browser simulation: const user = userEvent.setup(); await user.type(screen.getByLabelText(/email/i), 'test@test.com'); await user.click(screen.getByRole('button', { name: /submit/i })). Use findByText (async) for elements that appear after submission. Avoid fireEvent — it doesn't simulate browser behavior accurately.",
      "assertions": [
        { "type": "contains", "value": "userEvent" },
        { "type": "contains", "value": "findByText" }
      ]
    }
  ],
  "should_not_trigger": [
    "Write a PostgreSQL stored procedure",
    "Configure a Kubernetes deployment",
    "Set up a Go gRPC interceptor"
  ]
}
