web-renderer-test

remotion-dev/remotion

Add or update web renderer visual snapshot tests for Remotion components.

What is web-renderer-test?

This skill manages visual snapshot tests for Remotion's web renderer using vitest. Use it when you need to add new tests explicitly requested by the user or update existing tests to reflect implementation changes in the web renderer.

Create and manage visual snapshot tests using vitest in packages/web-renderer/src/test
Define test fixtures as React components in packages/web-renderer/src/test/fixtures
Execute tests with bunx vitest to validate rendering output
Register fixtures in Root.tsx to enable preview functionality
Compare rendered output against baseline snapshots to detect visual regressions

How to install web-renderer-test

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

Prerequisites

Remotion repository cloned locally
Node.js and bun package manager installed
Familiarity with React and TSX syntax
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 your test component and configuration
2.Add the fixture export 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 and a unique testId to validate the snapshot
5.Run bunx vitest src/test/video.test.tsx to execute and verify the test
6.Update packages/docs/docs/client-side-rendering/limitations.mdx if the test validates a newly supported property

Use cases

Good for

Add a new test when a user explicitly requests testing a specific component behavior or property
Update existing tests when implementation changes affect web renderer output
Validate that CSS properties, layout, or styling changes render correctly
Ensure visual consistency across different component configurations
Verify that new Remotion features render properly in the web renderer

Who it's for

Remotion developers working on web renderer features
Contributors adding new component capabilities
QA engineers validating visual rendering output
Developers maintaining Remotion's component library

web-renderer-test FAQ

When should I add a new test versus updating an existing one?

Add a new test only when the user explicitly requests it. Update existing tests when implementation changes affect how components render.

How do I preview a test fixture before running the test?

After adding the fixture to Root.tsx, you can preview it in the web renderer's preview interface to visually inspect the component before snapshot testing.

What happens if a snapshot test fails?

A snapshot failure indicates the rendered output differs from the baseline. Review the diff to determine if the change is intentional (update the snapshot) or a regression (fix the implementation).

Can I test animations or multi-frame compositions?

Yes, fixtures support durationInFrames and fps settings. Tests can render specific frames using the frame parameter in renderStillOnWeb().

What image formats are supported for snapshot testing?

The skill supports 'png' format for snapshot testing via the imageFormat parameter.

Full instructions (SKILL.md)

Source of truth, from remotion-dev/remotion.

name: web-renderer-test description: Add explicitly requested web renderer tests or update existing ones for implementation changes.

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

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.