web-renderer-test

작성자: remotion-dev

We need to translate the given text from English to Korean. The text describes a process for visual snapshot testing of web renderer components using vitest fixtures. We must preserve the name "web-renderer-test" if it appears, but it doesn't appear in the text. The text includes technical terms like "vitest fixtures", "React component", "renderStillOnWeb()", "testImage()", "bunx vitest", etc. We should keep those as is. Also preserve file paths like "packages/web-renderer/src/test/fixtures" and "packages/web-renderer/src/test/Root.tsx". The instruction says to translate only the text inside <text>, and not to add any labels or extra commentary. So we just output the Korean translation. Let's translate: "Visual snapshot testing for web renderer components using vitest fixtures." -> "vitest 픽스처를 사용한 웹 렌더러 컴포넌트의 시각적 스냅샷 테스트." "Create test fixtures in

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

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.