Nativewind add-test

Name: add-test
Author: nativewind

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

install

source · Clone the upstream repo

git clone https://github.com/nativewind/nativewind

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/nativewind/nativewind "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/add-test" ~/.claude/skills/nativewind-nativewind-add-test && rm -rf "$T"

manifest: .claude/skills/add-test/SKILL.md

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:

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:

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

Steps

Identify the feature: What CSS class or Nativewind feature needs testing? Use
```
$ARGUMENTS
```
as the starting point.
Find existing tests: Search
```
src/__tests__/
```
for similar tests to understand the pattern and where the new test should go.
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.
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.
Run the test: Execute
```
yarn test
```
to verify it passes.