Please read ./CONTRIBUTING.md as well

Note you need to re-build packages (

yarn build

in the package directory) as you change them, unless you or someone is running a

yarn watch

at root.

When you commit - don't add Generated by Claude and try and keep commits to one line, add a "Fixes " if associated with a GH issue, and start with a convential commit style - UNLESS its a change that shouldn't go into the changelog, in those cases you can do things like

docs:

site:

Tamagui Testing Guide

Running Tests

Kitchen Sink Tests

The kitchen-sink package contains the main integration tests for Tamagui components. To run these tests:

Start the web server (in the background):

cd code/kitchen-sink
yarn kitchen-sink:web
# or
npm run start:web

Run all web tests with different animation drivers:
```
yarn test:web
```
This runs tests with CSS, React Native, and Moti animation drivers.

Run tests with a specific animation driver:

# CSS animations driver
yarn test:web:driver-css

# React Native animations driver  
yarn test:web:driver-rn

# Moti animations driver
yarn test:web:driver-moti

Run a specific test file:

# Using playwright directly
cd code/kitchen-sink
npx playwright test tests/PopoverFocusScope.test.tsx

# Or with a specific driver
NODE_ENV=test TAMAGUI_TEST_ANIMATION_DRIVER=css npx playwright test tests/YourTest.test.tsx

Debug tests:

yarn test:web:debug
# or
npx playwright test --debug

Test Structure

Tests are located in

code/kitchen-sink/tests/

and follow the naming convention

ComponentName.test.tsx

Writing Tests

When writing tests for focus behavior or component interactions:

Use appropriate wait times for animations and focus changes
Be aware that
```
trapFocus
```
behavior depends on the component's open state
Test both trapped and non-trapped focus scenarios
Consider browser focus behavior when
```
trapFocus
```
is false

Common Issues

If tests fail due to timing, add appropriate
```
waitForTimeout
```
calls
For focus tests, ensure elements are visible before testing focus state
When testing popover/dialog components, wait for animations to complete

Commit Message Conventions

Use
```
site:
```
prefix (not
```
fix(site):
```
) for tamagui.dev changes since they don't go in the changelog
Use
```
ci:
```
prefix (not
```
fix(ci):
```
) for CI/workflow changes since they don't go in the changelog
Keep commit messages to a single line

Running Tests

The kitchen-sink package contains the main integration tests for Tamagui components. To run these tests:

Start the web server (in the background):

cd code/kitchen-sink
yarn kitchen-sink:web
# or
npm run start:web

Run all web tests with different animation drivers:

yarn test:web

This runs tests with CSS, React Native, and Moti animation drivers.

Run tests with a specific animation driver:

# CSS animations driver
yarn test:web:driver-css

# React Native animations driver  
yarn test:web:driver-rn

# Moti animations driver
yarn test:web:driver-moti

Run a specific test file:

# Using playwright directly
cd code/kitchen-sink
npx playwright test tests/PopoverFocusScope.test.tsx

# Or with a specific driver
NODE_ENV=test TAMAGUI_TEST_ANIMATION_DRIVER=css npx playwright test tests/YourTest.test.tsx

Debug tests:

yarn test:web:debug
# or
npx playwright test --debug

Tests are located in

code/kitchen-sink/tests/

ComponentName.test.tsx

When writing tests for focus behavior or component interactions:

Use appropriate wait times for animations and focus changes

Be aware that

trapFocus

behavior depends on the component's open state

Test both trapped and non-trapped focus scenarios

Consider browser focus behavior when

trapFocus

is false

If tests fail due to timing, add appropriate

waitForTimeout

calls

For focus tests, ensure elements are visible before testing focus state

When testing popover/dialog components, wait for animations to complete

Please read ./CONTRIBUTING.md as well

Tamagui Testing Guide

Running Tests

Kitchen Sink Tests

Test Structure

Writing Tests

Common Issues

Commit Message Conventions

Related Skills

Markdown Converter

Nano Banana Pro

1password

Tamagui Testing Guide

Running Tests

Kitchen Sink Tests

Test Structure

Writing Tests

Common Issues

Commit Message Conventions