---
id: sm-web-renderer-test
name: "web-renderer-test"
url: https://skills.yangsir.net/skill/sm-web-renderer-test
author: remotion-dev
domain: testing
tags: ["web-rendering", "browser-compatibility", "ui-testing", "visual-regression-testing", "frontend-testing"]
install_count: 2700
rating: 4.40 (82 reviews)
github: https://github.com/remotion-dev/remotion
---

# web-renderer-test

> 对Web渲染器进行视觉快照测试，使用Vitest框架，确保渲染效果的一致性，用于前端组件的回归测试。

**Stats**: 2,700 installs · 4.4/5 (82 reviews)

## Before / After 对比

### 确保Web渲染视觉一致性

## Readme

# web-renderer-test

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:

```
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'});
});

```

## Adding a new test

- Add a new fixture in `packages/web-renderer/src/test/fixtures`.

- **Important**: Add the fixture to `packages/web-renderer/src/test/Root.tsx` to add a way to preview it.

- Add a new test in `packages/web-renderer/src/test`.

- Run `bunx vitest src/test/video.test.tsx` to execute the test.

- **Important**: Update `packages/docs/docs/client-side-rendering/limitations.mdx` to reflect the newly supported property.

Weekly Installs394Repository[remotion-dev/remotion](https://github.com/remotion-dev/remotion)GitHub Stars39.9KFirst SeenJan 20, 2026Security Audits[Gen Agent Trust HubPass](/remotion-dev/remotion/web-renderer-test/security/agent-trust-hub)[SocketPass](/remotion-dev/remotion/web-renderer-test/security/socket)[SnykPass](/remotion-dev/remotion/web-renderer-test/security/snyk)Installed onclaude-code343gemini-cli287opencode287cursor281codex269antigravity225

---
*Source: https://skills.yangsir.net/skill/sm-web-renderer-test*
*Markdown mirror: https://skills.yangsir.net/api/skill/sm-web-renderer-test/markdown*