web-renderer-test

A focused contributor guide for adding test cases to Remotion's web renderer, the package that renders compositions client-side in the browser. The renderer source lives in packages/web-renderer and its test suite in packages/web-renderer/src/test, where verification is done through visual snapshot testing powered by vitest. A single test file can be run with a command such as bunx vitest src/test/video.test.tsx. Each test is driven by a fixture stored under packages/web-renderer/src/test/fixtures. A fixture exports a React component, typically wrapping content in Remotion's AbsoluteFill, together with metadata like an id, width, height, fps, and durationInFrames, marked as a const object. The paired test imports renderStillOnWeb, passes the fixture as the composition alongside a licenseKey (for example free-license), a frame index, inputProps, and an imageFormat such as png, then hands the resulting blob to a testImage helper keyed by a testId so the rendered output is snapshot-compared. The documented procedure for adding a new test has five steps: create a new fixture in the fixtures directory; register that fixture in packages/web-renderer/src/test/Root.tsx so it can be previewed; add a new test in packages/web-renderer/src/test; run the vitest command to execute it; and update packages/docs/docs/client-side-rendering/limitations.mdx to reflect any newly supported property. The two steps flagged as important, wiring the fixture into Root.tsx and keeping the limitations documentation current, are easy to overlook but keep the preview harness and the public docs in sync with what the renderer actually supports. Use this when contributing coverage for a new CSS property, component behavior, or rendering feature in the web renderer, or when learning how its snapshot testing setup is organized.