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 (
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 Add a new fixture in packages/web-renderer/src/test/fixtures. Important: Add the fixture to packages/web-renderer/src/test/Root.tsx to add a way to preview it. Add a new test in packages/web-renderer/src/test. Run bunx vitest src/test/video.test.tsx to execute the test.