---
name: remotion-dev-web-renderer-test
description: "Add explicitly requested web renderer tests or update existing ones for implementation changes."
license: "NOASSERTION"
metadata:
  decimalai-skill-id: "cdf1ca12-4106-41f0-9093-6c4701531eea"
  decimalai-version-id: "207df28b-f78d-4c0f-a5ba-0e53152ccbc2"
  decimalai-version: "3"
  decimalai-body-sha256: "89636c2c992f9cf09b4d9561e538278aaf26b14d941142c8a8b3e3d4fa116565"
  decimalai-name: "remotion-dev/web-renderer-test"
  decimalai-format: "1"
  decimalai-invocation: "model"
  decimalai-category: "testing"
  decimalai-source: "https://app.decimal.ai/s/remotion-dev-web-renderer-test@3/SKILL.md"
---
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:

```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.