測試 - RemotionLab

為什麼要測試影片？

程式化影片的好處之一是可以自動化測試。你可以驗證：

元件能正確渲染
Props 會產生預期的視覺效果
動畫在特定幀的值是否正確

渲染單幀做快照測試

用 @remotion/renderer 渲染特定幀，然後做比對：

import { bundle } from "@remotion/bundler";
import { renderStill, selectComposition } from "@remotion/renderer";
import path from "path";
 
test("renders frame 0 correctly", async () => {
  const bundled = await bundle({
    entryPoint: path.resolve("./src/index.ts"),
  });
 
  const composition = await selectComposition({
    serveUrl: bundled,
    id: "MyVideo",
  });
 
  await renderStill({
    composition,
    serveUrl: bundled,
    output: "test-output/frame-0.png",
    frame: 0,
  });
 
  // 用你喜歡的方式比對圖片
  // 例如：pixelmatch、jest-image-snapshot 等
});

測試動畫值

直接測試你的動畫邏輯函數：

import { interpolate, spring } from "remotion";
 
test("opacity is 0 at frame 0", () => {
  const opacity = interpolate(0, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  expect(opacity).toBe(0);
});
 
test("opacity is 1 at frame 30", () => {
  const opacity = interpolate(30, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  expect(opacity).toBe(1);
});
 
test("spring reaches ~1 after enough frames", () => {
  const value = spring({ frame: 60, fps: 30 });
  expect(value).toBeCloseTo(1, 1);
});

小結

用 renderStill 渲染單幀做快照測試
直接測試動畫邏輯函數（interpolate、spring）
程式化影片的可測試性是它比傳統影片剪輯的一大優勢