web-renderer-test▌
remotion-dev/remotion · updated Apr 8, 2026
Visual snapshot testing for web renderer components using vitest fixtures.
- ›Create test fixtures in packages/web-renderer/src/test/fixtures that define a React component, dimensions, frame rate, and duration
- ›Register fixtures in packages/web-renderer/src/test/Root.tsx to enable preview functionality
- ›Write test cases that render stills using renderStillOnWeb() and validate output with testImage() snapshot comparison
- ›Run tests with bunx vitest src/test/video.test.tsx and update docum
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:
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:
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
- Add a new fixture in
packages/web-renderer/src/test/fixtures. - Important: Add the fixture to
packages/web-renderer/src/test/Root.tsxto add a way to preview it. - Add a new test in
packages/web-renderer/src/test. - Run
bunx vitest src/test/video.test.tsxto execute the test. - Important: Update
packages/docs/docs/client-side-rendering/limitations.mdxto reflect the newly supported property.
Ratings
4.5★★★★★10 reviews- ★★★★★Shikha Mishra· Oct 10, 2024
web-renderer-test is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.
- ★★★★★Piyush G· Sep 9, 2024
Keeps context tight: web-renderer-test is the kind of skill you can hand to a new teammate without a long onboarding doc.
- ★★★★★Chaitanya Patil· Aug 8, 2024
Registry listing for web-renderer-test matched our evaluation — installs cleanly and behaves as described in the markdown.
- ★★★★★Sakshi Patil· Jul 7, 2024
web-renderer-test reduced setup friction for our internal harness; good balance of opinion and flexibility.
- ★★★★★Ganesh Mohane· Jun 6, 2024
I recommend web-renderer-test for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
- ★★★★★Oshnikdeep· May 5, 2024
Useful defaults in web-renderer-test — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
- ★★★★★Dhruvi Jain· Apr 4, 2024
web-renderer-test has been reliable in day-to-day use. Documentation quality is above average for community skills.
- ★★★★★Rahul Santra· Mar 3, 2024
Solid pick for teams standardizing on skills: web-renderer-test is focused, and the summary matches what you get after install.
- ★★★★★Pratham Ware· Feb 2, 2024
We added web-renderer-test from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.
- ★★★★★Yash Thakker· Jan 1, 2024
web-renderer-test fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.