mcpField
W
web-renderer-test

web-renderer-test

github.com/remotion-devTesting & quality68.6k2.8k installsUpdated today
Repository

About web-renderer-test

A skill for maintaining Remotion web renderer tests as implementation changes. It focuses on visual snapshots with vitest and documents the fixture and test workflow.

Key features

  1. 01Update renderer tests for implementation changes
  2. 02Run visual snapshot tests with vitest
  3. 03Use fixtures to power tests
  4. 04Register fixtures for previewing

Use cases

  1. 01Adjust tests after renderer changes
  2. 02Preview a fixture while updating a test

Install

Copy the command and run it in a terminal.

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

After installing, type/web-renderer-testin Claude Code to confirm it loaded.

Details

From the project README

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

  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.

Comments

Markdown supported