Skip to main content

测试 Remotion 组件

Remotion 组件是常规的 React 组件，尽管它们需要被封装在一些额外的上下文中才能进行渲染。

🌐 Remotion components are regular React component, albeit they need to be wrapped in some extra contexts to render them.

你可以像测试普通 React 组件一样测试 Remotion 组件，使用以下一些流行的库：

🌐 You can approach testing Remotion components the same way as testing regular React components, by using some of these popular libraries:

添加 Remotion 上下文​

🌐 Adding Remotion contexts

要添加 Remotion 所需的上下文，请考虑使用 <Thumbnail> 组件来添加 Remotion 所需的必要 React 上下文，并在特定帧显示组件。

🌐 To add the contexts that Remotion needs, consider using the <Thumbnail> component to add the necessary React contexts that Remotion needs and to show the component at a specific frame.

添加 noSuspense 属性（从 Remotion v4.0.271 可用）以防止组件被封装在 React <Suspense> 中，这可能会延迟标记的渲染。

🌐 Add the noSuspense prop (available from Remotion v4.0.271) to prevent the component to be wrapped in React <Suspense>, which might delay the rendering of the markup.

使用 Happy DOM 和 Bun 的示例​

🌐 Example using Happy DOM and Bun

虽然不是最复杂的，但这是测试 Remotion 组件的一种非常快速且轻量的方法。

🌐 While not the most sophisticated, this is a very fast and lightweight way to test Remotion components.

src/test/example.test.ts
import {Thumbnail} from '@remotion/player';
import {expect, test} from 'bun:test';

import {renderToString} from 'react-dom/server';
import {useCurrentFrame} from 'remotion';

const Comp: React.FC<{}> = () => {
  const frame = useCurrentFrame();
  const data = `We are on frame ${frame}`;
  return <div>{data}</div>;
};

test('should work', () => {
  const readStream = renderToString(<Thumbnail component={Comp} compositionHeight={1000} compositionWidth={1000} durationInFrames={1000} fps={30} frameToDisplay={10} noSuspense />);

  expect(readStream).toContain('<div>We are on frame 10</div>');
});
bunfig.tom
[test]
preload = "./happydom.ts"
happydom.ts
import {GlobalRegistrator} from '@happy-dom/global-registrator';

GlobalRegistrator.register();

使用运行测试

🌐 Run the test using

bun test src/test/example.test.ts
Last updated on