mcpField
W
web-renderer-test

web-renderer-test

github.com/remotion-dev测试与质量68.6k2.8k 次安装今天更新
代码仓库

关于 web-renderer-test

用于随实现变更维护 Remotion Web 渲染器测试的技能，采用 vitest 进行视觉快照测试，并说明测试夹具与执行流程。

主要功能

  1. 01根据实现变更更新渲染器测试
  2. 02使用 vitest 运行视觉快照测试
  3. 03通过测试夹具驱动测试
  4. 04注册夹具以供预览

适用场景

  1. 01渲染器变更后调整测试
  2. 02更新测试时预览夹具

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/web-renderer-test确认已加载。

详细介绍

需要时，使用此技能根据实现变更更新现有的 Web 渲染器测试。只有用户明确要求时，才添加新测试。

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，以反映新支持的属性。

评论

支持 Markdown