web-renderer-test

par remotion-dev

Tests de capture visuelle pour les composants du moteur de rendu web utilisant des fixtures vitest. Créez des fixtures de test dans packages/web-renderer/src/test/fixtures qui définissent un composant React, des dimensions, une fréquence d'images et une durée. Enregistrez les fixtures dans packages/web-renderer/src/test/Root.tsx pour activer la fonctionnalité d'aperçu. Écrivez des cas de test qui rendent des images fixes avec renderStillOnWeb() et validez la sortie avec la comparaison de captures testImage(). Exécutez les tests avec bunx vitest src/test/video.test.tsx et mettez à jour la documentation dans...

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

Télécharger ZIP GitHub

56.4k

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

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.
Important: Update packages/docs/docs/client-side-rendering/limitations.mdx to reflect the newly supported property.