# Add Test

> Scaffold a test for a Tailwind utility or Nativewind feature following the project's testing conventions.

- Skill: `nativewind/add-test` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nativewind/add-test`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nativewind/add-test/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: nativewind (https://skillmd.com/u/nativewind)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nativewind/add-test

---


## Context

Nativewind v5 tests live in `src/__tests__/` and use the `renderCurrentTest()` helper from `src/test-utils.tsx`.

## Convention

The test name IS the className being tested. `renderCurrentTest()` auto-extracts it:

```typescript
import { renderCurrentTest } from "../test-utils";

describe("Feature Name", () => {
  test("class-name", async () => {
    expect(await renderCurrentTest()).toStrictEqual({
      props: {
        style: { /* expected RN style */ },
      },
    });
  });
});
```

For custom utilities that map to non-style props (like `elevation`, `tint`, `ripple`), the expected output includes those props directly:

```typescript
test("elevation-sm", async () => {
  expect(await renderCurrentTest()).toStrictEqual({
    props: {
      style: { elevation: 3 },
    },
  });
});
```

## Steps

1. **Identify the feature**: What CSS class or Nativewind feature needs testing? Use `$ARGUMENTS` as the starting point.

2. **Find existing tests**: Search `src/__tests__/` for similar tests to understand the pattern and where the new test should go.

3. **Determine expected output**: Figure out what React Native style the CSS class should produce. Check Tailwind docs, theme.css, and the react-native-css compiler if needed.

4. **Write the test**: Follow the exact convention above. Place it in the appropriate existing test file, or create a new one if it's a new category.

5. **Run the test**: Execute `yarn test` to verify it passes.