diff --git a/videos/src/Root.test.tsx b/videos/src/Root.test.tsx
new file mode 100644
index 0000000..be0a712
--- /dev/null
+++ b/videos/src/Root.test.tsx
@@ -0,0 +1,109 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { RemotionRoot } from "./Root";
+
+// Mock Remotion components
+vi.mock("remotion", () => ({
+ Composition: vi.fn(({ id, durationInFrames, fps, width, height }) => (
+
+ {id}
+
+ )),
+ Folder: vi.fn(({ name, children }) => (
+ {children}
+ )),
+}));
+
+// Mock composition components
+vi.mock("./Composition", () => ({
+ MyComposition: vi.fn(() => MyComposition
),
+}));
+
+vi.mock("./Nip05Tutorial", () => ({
+ Nip05Tutorial: vi.fn(() => Nip05Tutorial
),
+}));
+
+vi.mock("./Nip05TutorialMobile", () => ({
+ Nip05TutorialMobile: vi.fn(() => Nip05TutorialMobile
),
+}));
+
+vi.mock("./PortalPresentation", () => ({
+ PortalPresentation: vi.fn(() => PortalPresentation
),
+}));
+
+vi.mock("./PortalPresentationMobile", () => ({
+ PortalPresentationMobile: vi.fn(() => PortalPresentationMobile
),
+}));
+
+describe("RemotionRoot", () => {
+ it("renders without errors", () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+ });
+
+ it("renders Portal folder", () => {
+ const { container } = render();
+ const portalFolder = container.querySelector('[data-testid="folder-Portal"]');
+ expect(portalFolder).toBeInTheDocument();
+ });
+
+ it("renders PortalPresentation composition in Portal folder", () => {
+ const { container } = render();
+ const portalFolder = container.querySelector('[data-testid="folder-Portal"]');
+ const composition = portalFolder?.querySelector(
+ '[data-testid="composition-PortalPresentation"]'
+ );
+ expect(composition).toBeInTheDocument();
+ expect(composition?.getAttribute("data-width")).toBe("1920");
+ expect(composition?.getAttribute("data-height")).toBe("1080");
+ expect(composition?.getAttribute("data-fps")).toBe("30");
+ expect(composition?.getAttribute("data-duration")).toBe("2700"); // 90 * 30
+ });
+
+ it("renders PortalPresentationMobile composition in Portal folder", () => {
+ const { container } = render();
+ const portalFolder = container.querySelector('[data-testid="folder-Portal"]');
+ const composition = portalFolder?.querySelector(
+ '[data-testid="composition-PortalPresentationMobile"]'
+ );
+ expect(composition).toBeInTheDocument();
+ expect(composition?.getAttribute("data-width")).toBe("1080");
+ expect(composition?.getAttribute("data-height")).toBe("1920");
+ expect(composition?.getAttribute("data-fps")).toBe("30");
+ expect(composition?.getAttribute("data-duration")).toBe("2700"); // 90 * 30
+ });
+
+ it("renders NIP-05-Tutorial folder", () => {
+ const { container } = render();
+ const folder = container.querySelector('[data-testid="folder-NIP-05-Tutorial"]');
+ expect(folder).toBeInTheDocument();
+ });
+
+ it("renders Nip05Tutorial desktop composition", () => {
+ const { container } = render();
+ const composition = container.querySelector('[data-testid="composition-Nip05Tutorial"]');
+ expect(composition).toBeInTheDocument();
+ expect(composition?.getAttribute("data-width")).toBe("1920");
+ expect(composition?.getAttribute("data-height")).toBe("1080");
+ });
+
+ it("renders Nip05TutorialMobile composition", () => {
+ const { container } = render();
+ const composition = container.querySelector('[data-testid="composition-Nip05TutorialMobile"]');
+ expect(composition).toBeInTheDocument();
+ expect(composition?.getAttribute("data-width")).toBe("1080");
+ expect(composition?.getAttribute("data-height")).toBe("1920");
+ });
+
+ it("renders MyComp composition", () => {
+ const { container } = render();
+ const composition = container.querySelector('[data-testid="composition-MyComp"]');
+ expect(composition).toBeInTheDocument();
+ });
+});