web-renderer-test

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, }} /> ); };

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.