web-renderer-test by remotion-dev/remotion
npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-testWeb 渲染器位于 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;
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
对应的测试如下所示:
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'});
});
packages/web-renderer/src/test/fixtures 中添加一个新的 fixture。packages/web-renderer/src/test/Root.tsx 中,以便添加预览方式。packages/web-renderer/src/test 中添加一个新测试。bunx vitest src/test/video.test.tsx 来执行测试。packages/docs/docs/client-side-rendering/limitations.mdx 以反映新支持的属性。每周安装量
458
代码仓库
GitHub 星标数
40.6K
首次出现
2026 年 1 月 20 日
安全审计
已安装于
claude-code393
gemini-cli339
opencode339
cursor333
codex321
github-copilot268
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
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'});
});
packages/web-renderer/src/test/fixtures.packages/web-renderer/src/test/Root.tsx to add a way to preview it.packages/web-renderer/src/test.bunx vitest src/test/video.test.tsx to execute the test.packages/docs/docs/client-side-rendering/limitations.mdx to reflect the newly supported property.Weekly Installs
458
Repository
GitHub Stars
40.6K
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
claude-code393
gemini-cli339
opencode339
cursor333
codex321
github-copilot268
代码审查最佳实践指南:完整流程、安全与性能审查清单
12,400 周安装
Rust调用关系图生成器 - 可视化函数调用层次结构,提升代码分析效率
539 周安装
parallel-web-extract:并行网页内容提取工具,高效抓取网页数据
595 周安装
腾讯云CloudBase AI模型Web技能:前端调用混元/DeepSeek模型,实现流式文本生成
560 周安装
Apollo Connectors 模式助手:GraphQL API 连接器开发与集成指南
565 周安装
GitHub Trending 趋势分析工具:实时发现热门项目、技术洞察与开源机会
556 周安装
GSAP React 集成教程:useGSAP Hook 动画库与 React 组件开发指南
546 周安装