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 언어
- 영어
- 스타
- 64,425
- 포크
- 5,086
설치 방법
기본적으로 소스를 먼저 확인하는 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에서 보기