web-renderer-test

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

Web渲染器位于

packages/web-renderer

目录下，测试套件在

packages/web-renderer/src/test

目录中。

它使用vitest进行视觉快照测试。例如，可以通过以下命令执行测试文件：

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

每个测试都由

packages/web-renderer/src/test/fixtures

目录中的fixture提供支持。例如，一个fixture的结构如下：

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;

对应的测试代码如下：

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

添加新测试的步骤

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.

在
```
packages/web-renderer/src/test/fixtures
```
目录中添加新的fixture。
重要提示：将该fixture添加到
```
packages/web-renderer/src/test/Root.tsx
```
中，以便能够预览它。
在
```
packages/web-renderer/src/test
```
目录中添加新的测试文件。
运行
```
bunx vitest src/test/video.test.tsx
```
命令执行测试。