web-renderer-test

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

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.