web-renderer-test
Add explicitly requested web renderer tests or update existing ones for implementation changes.
ソース情報
- リポジトリ
- remotion-dev/remotion
- ソースの最終更新活動
- 2026年9月24日 09:17
- 検出された SKILL.md の言語
- 英語
- スター
- 67,469
- フォーク
- 5,444
インストール方法
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
ソースファイルを確認
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
SKILL.md を表示中
SKILL.md
ソースの指示 · 読み取り専用プレビュー- name
- web-renderer-test
- description
- Add explicitly requested web renderer tests or update existing ones for implementation changes.
Use this skill to update existing web renderer tests when needed for implementation changes. Add new tests only when the user explicitly requests them.
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
```
## Example
Each test is powered by a fixture in `packages/web-renderer/src/test/fixtures`.
A fixture looks like this for example:
```tsx
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:
```tsx
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'});
});
```
## Adding a new test
1. Add a new fixture in `packages/web-renderer/src/test/fixtures`.
2. **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it.
3. Add a new test in `packages/web-renderer/src/test`.
4. Run `bunx vitest src/test/video.test.tsx` to execute the test.
5. **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property.
GitHubで見る