web-renderer-test

Kiểm thử ảnh chụp nhanh giao diện cho các thành phần web renderer sử dụng vitest fixtures. Tạo test fixtures trong packages/web-renderer/src/test/fixtures để định nghĩa một React component, kích thước, tốc độ khung hình và thời lượng. Đăng ký fixtures trong packages/web-renderer/src/test/Root.tsx để kích hoạt chức năng xem trước. Viết các test case hiển thị ảnh tĩnh bằng renderStillOnWeb() và xác thực đầu ra bằng so sánh ảnh chụp nhanh testImage(). Chạy kiểm thử với bunx vitest src/test/video.test.tsx và cập nhật tài liệu trong...

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.

Example

Adding a new test

Thêm skills từ remotion-dev