Chapter 982: Testing Remotion components

Core Idea

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

Key Concepts

• Adding Remotion contexts
• Example using Happy DOM and Bun

Code Examples

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

• What it demonstrates: Usage pattern for Testing Remotion components from the official docs.

Key Takeaways

1. Understand adding remotion contexts when working with Testing Remotion components.
2. Understand example using happy dom and bun when working with Testing Remotion components.

Connects To

• 4 0 Alpha: related page in the Miscellaneous (Core) section.
• ai: related page in the Miscellaneous (Core) section.
• Animated Emoji: related page in the Miscellaneous (Core) section.