web-renderer-test
starsforks
How to install web-renderer-test?
remotion-dev/remotion/web-renderer-test
$npx -y skills add remotion-dev/remotion --skill web-renderer-testAdd a test case to the web renderer
SKILL.md
| 1 | The web renderer is in `packages/web-renderer` and the test suite is in `packages/web-renderer/src/test`. |
| 2 | |
| 3 | It uses visual snapshot testing using vitest. A test file can for example be executed using: |
| 4 | |
| 5 | ``` |
| 6 | bunx vitest src/test/video.test.tsx |
| 7 | ``` |
| 8 | |
| 9 | ## Example |
| 10 | |
| 11 | Each test is powered by a fixture in `packages/web-renderer/src/test/fixtures`. |
| 12 | A fixture looks like this for example: |
| 13 | |
| 14 | ```tsx |
| 15 | import {AbsoluteFill} from 'remotion'; |
| 16 | |
| 17 | const Component: React.FC = () => { |
| 18 | return ( |
| 19 | <AbsoluteFill |
| 20 | style={{ |
| 21 | justifyContent: 'center', |
| 22 | alignItems: 'center', |
| 23 | }} |
| 24 | > |
| 25 | <div |
| 26 | style={{ |
| 27 | backgroundColor: 'red', |
| 28 | width: 100, |
| 29 | height: 100, |
| 30 | borderRadius: 20, |
| 31 | }} |
| 32 | /> |
| 33 | </AbsoluteFill> |
| 34 | ); |
| 35 | }; |
| 36 | |
| 37 | export const backgroundColor = { |
| 38 | component: Component, |
| 39 | id: 'background-color', |
| 40 | width: 200, |
| 41 | height: 200, |
| 42 | fps: 25, |
| 43 | durationInFrames: 1, |
| 44 | } as const; |
| 45 | ``` |
| 46 | |
| 47 | The corresponding test looks like this: |
| 48 | |
| 49 | ```tsx |
| 50 | import {test} from 'vitest'; |
| 51 | import {renderStillOnWeb} from '../render-still-on-web'; |
| 52 | import {backgroundColor} from './fixtures/background-color'; |
| 53 | import {testImage} from './utils'; |
| 54 | |
| 55 | test('should render background-color', async () => { |
| 56 | const blob = await renderStillOnWeb({ |
| 57 | licenseKey: 'free-license', |
| 58 | composition: backgroundColor, |
| 59 | frame: 0, |
| 60 | inputProps: {}, |
| 61 | imageFormat: 'png', |
| 62 | }); |
| 63 | |
| 64 | await testImage({blob, testId: 'background-color'}); |
| 65 | }); |
| 66 | ``` |
| 67 | |
| 68 | ## Adding a new test |
| 69 | |
| 70 | 1. Add a new fixture in `packages/web-renderer/src/test/fixtures`. |
| 71 | 2. **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it. |
| 72 | 3. Add a new test in `packages/web-renderer/src/test`. |
| 73 | 4. Run `bunx vitest src/test/video.test.tsx` to execute the test. |
| 74 | 5. **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property. |
People who liked this also viewed
6 picksType
- tddSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- test-driven-developmentUse when implementing any feature or bugfix, before writing implementation codeSkillsJul 2026
- qaSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- verification-before-completionUse when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidenceSkillsJul 2026
- webapp-testingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser lSkillsJul 2026
- playwright-best-practicesUse when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI/CD, optimizing performance, mocking APIs, handling authentication or OAuth, teSkillsJul 2026
