Web Renderer Test

This automates the process of adding visual snapshot tests to the web renderer in a Remotion project. You'll create a fixture component in the test directory, register it in Root.tsx for previewing, write a corresponding test that renders a still frame, and update the documentation to note the newly supported property. It uses vitest under the hood and follows a straightforward pattern where each fixture exports a component with metadata like dimensions and frame count. The workflow is tight but requires you to touch multiple files for each test, which makes sense given you're simultaneously testing, documenting, and maintaining preview capabilities. Good for teams that want consistent visual regression testing on their rendering components.

skills.sh installs: 2.9K
GitHub stars: 72.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add remotion-dev/remotion --skill web-renderer-test --agent claude-code

Installs into .claude/skills of the current project.

Files

Use this skill to update existing web renderer tests when needed for implementation changes. Add new tests only when the user explicitly requests them.

The web renderer is in packages/web-renderer and the test suite is in packages/web-renderer/src/test.

It uses visual snapshot testing using vitest. A test file can for example be executed using:

bunx vitest src/test/video.test.tsx

Keep the suite small

Prefer extending an existing fixture grid or using testCompositions from utils.ts to put related cases into one snapshot. Use a representative frame and scale instead of multiplying every case across frames, scales, opacity variants, and literal controls.

Use the existing testImage snapshot methodology by default. Do not add native screenshot comparisons, warm-up captures, fallback renders, or success-path PNG evidence unless the user specifically requests that methodology. Keep parser and state assertions cheap and retain extra fixtures in Studio for manual investigation.