skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

web-renderer-test

Create and run visual snapshot tests for the Remotion web renderer.

55.9k|4.2k|Updated Jun 23, 2020
Search Tags:#vitest#fixtures#snapshot#visual-testing#bunx#Root.tsx#web-renderer
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-test
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-renderer-test
Source: https://github.com/remotion-dev/remotion/tree/main/.claude/skills/web-renderer-test
Command: npx skills add https://github.com/remotion-dev/remotion --skill web-renderer-test

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers extend and validate the Remotion web renderer by adding visual snapshot tests, ensuring rendering remains correct as code evolves.

Core Features & Use Cases

  • Add new visual tests: Create fixture-based tests in the web renderer test suite to verify expected render outcomes.
  • Run tests locally: Use bunx vitest to execute tests like src/test/video.test.tsx and review snapshot results.
  • Real-world workflow: Extend the test suite by adding fixtures under packages/web-renderer/src/test/fixtures and update Root.tsx to preview new tests.

Quick Start

  • Create a new fixture in packages/web-renderer/src/test/fixtures.
  • Add a corresponding test in packages/web-renderer/src/test.
  • Update Root.tsx to preview the new fixture.
  • Run bunx vitest src/test/video.test.tsx to execute the test.

Frequently Asked Questions about web-renderer-test

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add visual snapshot tests for a web renderer?▼

Visual snapshot tests for a web renderer verify rendering correctness by creating fixture-based tests, executing them with bunx vitest, and comparing snapshot results to validate expected visual outcomes.

What is the workflow for running Remotion web renderer tests locally?▼

The workflow for running Remotion web renderer tests locally involves creating fixtures, updating Root.tsx for preview, and executing bunx vitest on specific test files like video.test.tsx to review snapshot results.

Do I need vitest to run visual snapshot tests for the web renderer?▼

Yes, vitest is required to execute visual snapshot tests for the web renderer. The test suite relies on bunx to run vitest commands and manage snapshot comparisons for the rendering fixtures.

How do I preview new test fixtures before running the full test suite?▼

To preview new test fixtures before running the full test suite, update the Root.tsx file in the web-renderer package to enable rapid iteration and visual verification of the new fixture components.

Where should visual test fixtures be stored for web renderer validation?▼

Visual test fixtures for web renderer validation should be stored under the packages/web-renderer/src/test/fixtures directory, keeping them organized alongside the corresponding test files in the suite.

Why do my web renderer visual tests fail after updating rendering code?▼

Web renderer visual tests fail after updating rendering code because snapshot tests detect visual differences. Running bunx vitest allows you to review these changes and update snapshots if the new rendering outcomes are expected.

Related Skills

Explore More Software Engineering Skills→
remotion-devremotion-dev
55.9k

web-renderer-test

Create and run visual snapshot tests for the Remotion web renderer.

Official
Advanced
aggelosChatziioannouaggelosChatziioannou

Second Brain

Capture, organize, and synthesize personal notes into a connected knowledge base.

Community
Intermediate
OpentronsOpentrons
515

analyses-snapshot-testing

Validate protocol analysis outputs against committed JSON snapshots.

Official
Advanced
gtpgg1013gtpgg1013

tui-visual-test

Capture and compare Ink CLI frame renders to detect visual regressions.

Community
Advanced