web-renderer-test

Web 渲染器位于 packages/web-renderer，对应的测试套件位于 packages/web-renderer/src/test。

该套件基于 vitest 实现了视觉快照测试。若要运行某个测试文件，可以执行以下命令：

bunx vitest src/test/video.test.tsx

示例

每个测试用例均由 packages/web-renderer/src/test/fixtures 中的 fixture 驱动。
一个典型的 fixture 代码如下：

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;

对应的测试代码如下：

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'});
});

新增测试用例

1. 在 packages/web-renderer/src/test/fixtures 目录下新增一个 fixture。
2. 重要：必须将新 fixture 补充到 packages/web-renderer/src/test/Root.tsx 中，以便提供预览支持。
3. 在 packages/web-renderer/src/test 目录下编写并添加新的测试文件。
4. 运行 bunx vitest src/test/video.test.tsx 执行测试。
5. 重要：同步更新 packages/docs/docs/client-side-rendering/limitations.mdx，在文档中体现新支持的属性。