Web Renderer Test
Add visual snapshot tests to Remotion’s web renderer package using Vitest fixtures and renderStillOnWeb.
Overview
web-renderer-test is an agent skill for the Ship phase that adds Vitest visual snapshot cases to Remotion’s web-renderer package using fixtures and renderStillOnWeb.
Install
npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-testWhat is this skill?
- Points tests at packages/web-renderer and packages/web-renderer/src/test with bunx vitest entry paths
- Defines fixture shape in src/test/fixtures (component, id, width, height, fps, durationInFrames)
- Uses renderStillOnWeb with licenseKey, composition, frame, inputProps, and imageFormat
- Pairs fixtures with testImage(blob, testId) for visual snapshot comparison
- Documents example flow from background-color fixture to vitest case naming convention
- Tests live under packages/web-renderer/src/test with fixtures in src/test/fixtures
Adoption & trust: 1.3k installs on skills.sh; 49.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You changed Remotion’s web renderer but lack a fixture-backed Vitest case that snapshots still frames the way the monorepo already expects.
Who is it for?
Developers working inside the Remotion monorepo who need to extend visual coverage for web-renderer compositions.
Skip if: Teams only deploying finished Remotion videos without touching packages/web-renderer or Vitest snapshot infrastructure.
When should I use this skill?
Add a test case to the web renderer or extend visual snapshot coverage after renderer changes.
What do I get? / Deliverables
After following the skill you have a new fixture under src/test/fixtures and a Vitest test that renders frame 0 and validates the PNG via testImage.
- New fixture file in packages/web-renderer/src/test/fixtures
- Vitest test invoking renderStillOnWeb and testImage
Recommended Skills
Journey fit
The skill only walks through adding and running renderer test cases—core ship-phase quality work before releases. Testing subphase fits Vitest execution, fixture authoring, and PNG still snapshot assertions in packages/web-renderer.
How it compares
Use this procedural test recipe instead of generic Jest screenshot advice that does not match Remotion’s fixture and renderStillOnWeb APIs.
Common Questions / FAQ
Who is web-renderer-test for?
Remotion contributors and advanced users maintaining packages/web-renderer who add regression tests alongside renderer changes.
When should I use web-renderer-test?
Use it in the Ship phase when you need a new visual snapshot test: author a fixture, wire renderStillOnWeb, and run bunx vitest on the matching src/test file.
Is web-renderer-test safe to install?
Treat it as documentation-only guidance for your local repo; review the Security Audits panel on this Prism page before trusting any third-party skill source.
SKILL.md
READMESKILL.md - Web Renderer Test
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 ``` ## Example Each test is powered by a fixture in `packages/web-renderer/src/test/fixtures`. A fixture looks like this for example: ```tsx import {AbsoluteFill} from 'remotion'; const Component: React.FC = () => { return ( <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center', }} > <div style={{ backgroundColor: 'red', width: 100, height: 100, borderRadius: 20, }} /> </AbsoluteFill> ); }; export const backgroundColor = { component: Component, id: 'background-color', width: 200, height: 200, fps: 25, durationInFrames: 1, } as const; ``` The corresponding test looks like this: ```tsx import {test} from 'vitest'; import {renderStillOnWeb} from '../render-still-on-web'; import {backgroundColor} from './fixtures/background-color'; import {testImage} from './utils'; test('should render background-color', async () => { const blob = await renderStillOnWeb({ licenseKey: 'free-license', composition: backgroundColor, frame: 0, inputProps: {}, imageFormat: 'png', }); await testImage({blob, testId: 'background-color'}); }); ``` ## Adding a new test 1. Add a new fixture in `packages/web-renderer/src/test/fixtures`. 2. **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it. 3. Add a new test in `packages/web-renderer/src/test`. 4. Run `bunx vitest src/test/video.test.tsx` to execute the test. 5. **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property.