web-renderer-test

Web renderer 位於 packages/web-renderer，而測試套件則位於 packages/web-renderer/src/test。

專案採用 Vitest 進行視覺快照測試（Visual snapshot testing）。若要執行特定測試檔案，可參考以下指令：

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，同步反映最新支援的屬性。