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
$ARGUMENTSas 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 testto verify it passes.