Agent skill

web-renderer-test

Add a test case to the web renderer

View SKILL.md on GitHub Repository
Stars 41,180
Forks 2,640

Install this agent skill to your Project

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

SKILL.md

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.

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

remotion-dev/remotion

remotion-best-practices

Best practices for Remotion - Video creation in React

41,180 2,640
Explore
remotion-dev/remotion

docs-demo

Add an interactive demo to the Remotion documentation. Use when creating a new <Demo> component for docs pages.

41,180 2,640
Explore
remotion-dev/remotion

add-sfx

Add a new sound effect to @remotion/sfx

41,180 2,640
Explore
remotion-dev/remotion

add-new-package

41,180 2,640
Explore
remotion-dev/remotion

add-cli-option

41,180 2,640
Explore
remotion-dev/remotion

video-report

Generate a report about a video

41,180 2,640
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results