web-renderer-test

remotion-dev/remotion

Add visual snapshot tests to Remotion's web renderer using vitest and fixture-based components.

What is web-renderer-test?

This skill guides you through adding test cases to the web renderer in the Remotion project. It uses vitest for visual snapshot testing, where you create React component fixtures and corresponding test files that verify rendering output.

Create React component fixtures in the fixtures directory with composition metadata
Write vitest test cases that render components and compare visual snapshots
Execute tests using bunx vitest to validate rendering behavior
Preview fixtures by registering them in Root.tsx
Update documentation to reflect newly supported rendering properties

How to install web-renderer-test

npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-test

Prerequisites

Access to the Remotion repository
Node.js and bun installed
Familiarity with React and TypeScript
Understanding of vitest testing framework

Claude Code

Cursor

Windsurf

Cline

How to use web-renderer-test

1.Create a new fixture file in packages/web-renderer/src/test/fixtures with a React component and composition config
2.Add the fixture to packages/web-renderer/src/test/Root.tsx for preview support
3.Create a corresponding test file in packages/web-renderer/src/test that imports the fixture and uses renderStillOnWeb()
4.Call testImage() with the rendered blob to perform visual snapshot comparison
5.Run bunx vitest src/test/video.test.tsx to execute and validate the test
6.Update packages/docs/docs/client-side-rendering/limitations.mdx to document the newly supported feature

Use cases

Good for

Testing new visual features or components in the web renderer
Verifying that rendering changes don't break existing output
Adding regression tests for bug fixes in the renderer
Validating support for new CSS properties or Remotion components
Ensuring cross-browser rendering consistency

Who it's for

Remotion contributors and maintainers
Developers extending the web renderer with new features
QA engineers validating rendering behavior
Open-source contributors adding test coverage

web-renderer-test FAQ

What is a fixture in this context?

A fixture is a React component paired with metadata (id, dimensions, fps, duration) that defines a test case. It lives in packages/web-renderer/src/test/fixtures and serves as both a testable unit and a previewable component.

How do I run a specific test?

Use bunx vitest src/test/video.test.tsx to run tests. You can also use vitest's filtering options to run specific test cases.

Why do I need to add the fixture to Root.tsx?

Adding the fixture to Root.tsx registers it for preview in the development environment, allowing visual inspection before snapshot comparison.

What does testImage() do?

testImage() compares the rendered blob against a stored visual snapshot. On first run, it creates the snapshot; on subsequent runs, it verifies the output matches.

When should I update the limitations documentation?

Update packages/docs/docs/client-side-rendering/limitations.mdx whenever your test validates support for a previously unsupported CSS property or Remotion feature.

Full instructions (SKILL.md)

Source of truth, from remotion-dev/remotion.

name: web-renderer-test description: Add a test case to the web renderer

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.tsx to add a way to preview it.
Add a new test in packages/web-renderer/src/test.
Run bunx vitest src/test/video.test.tsx to execute the test.
Important: Update packages/docs/docs/client-side-rendering/limitations.mdx to reflect the newly supported property.