test: update test suite for fiber architecture

Add fiber-specific tests (rendering, reconciliation, hooks, effects,
commit, context, events, portals, memo, refs, errors, internals).
Update existing integration tests for fiber-based API. Remove old
reconciler tests.

Author: MarcelOlsen

tests/MiniReact.context.test.ts

@@ -5,8 +5,8 @@ import {
 	render,
 	useContext,
 	useState,
-} from "../src/MiniReact";
-import type { FunctionalComponent } from "../src/core/types";
+} from "@/MiniReact";
+import type { FunctionalComponent } from "@/core/types";
 
 describe("MiniReact.Context API", () => {
 	let container: HTMLElement;

tests/MiniReact.createElement.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
-import { createElement } from "../src/MiniReact";
-import { TEXT_ELEMENT } from "../src/core/types";
+import { createElement } from "@/MiniReact";
+import { TEXT_ELEMENT } from "@/core/types";
 
 describe("MiniReact.createElement", () => {
 	test("should create an element with type and props", () => {

tests/MiniReact.createElementFC.test.ts

@@ -1,7 +1,7 @@
 import { describe, expect, test } from "bun:test";
-import { createElement } from "../src/MiniReact";
-import type { InternalTextElement, MiniReactElement } from "../src/core/types";
-import { TEXT_ELEMENT } from "../src/core/types";
+import { createElement } from "@/MiniReact";
+import type { InternalTextElement, MiniReactElement } from "@/core/types";
+import { TEXT_ELEMENT } from "@/core/types";
 
 describe("MiniReact.createElement with Functional Components", () => {
 	const MyComponent = (
@@ -433,7 +433,7 @@ describe("MiniReact.createElement with Functional Components", () => {
 			"deep-value",
 		);
 		expect(
-			typedProps.deep.level1.level2.level3.level4.level5.array[0].nested,
+			typedProps.deep.level1.level2.level3.level4.level5.array[0]!.nested,
 		).toBe("in-array");
 	});
 });

tests/MiniReact.events.test.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, test } from "bun:test";
-import { createElement, render, useState } from "../src/MiniReact";
-import type { FunctionalComponent, SyntheticEvent } from "../src/MiniReact";
+import { createElement, render, useState } from "@/MiniReact";
+import type { FunctionalComponent, SyntheticEvent } from "@/MiniReact";
 
 describe("MiniReact.events", () => {
 	let container: HTMLElement;

tests/MiniReact.fragments.test.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, test } from "bun:test";
-import { Fragment, createElement, render, useState } from "../src/MiniReact";
+import { Fragment, createElement, render, useState } from "@/MiniReact";
 
 describe("MiniReact Fragment Tests", () => {
 	let container: HTMLElement;
@@ -181,13 +181,13 @@ describe("MiniReact Fragment Tests", () => {
 			const button = container.querySelector("button");
 			const spans = container.querySelectorAll("span");
 
-			expect(spans[0].textContent).toBe("Count: ");
-			expect(spans[1].textContent).toBe("0");
+			expect(spans[0]!.textContent).toBe("Count: ");
+			expect(spans[1]!.textContent).toBe("0");
 
 			// Simulate click
 			button?.click();
 
-			expect(spans[1].textContent).toBe("1");
+			expect(spans[1]!.textContent).toBe("1");
 		});
 	});
 

tests/MiniReact.jsx.test.ts

@@ -1,14 +1,7 @@
 import { beforeEach, describe, expect, test } from "bun:test";
+import { Fragment, jsx, jsxDEV, jsxs, render, useState } from "@/MiniReact";
+import type { FunctionalComponent, MiniReactElement } from "@/core/types";
 import { Window } from "happy-dom";
-import {
-	Fragment,
-	jsx,
-	jsxDEV,
-	jsxs,
-	render,
-	useState,
-} from "../src/MiniReact";
-import type { FunctionalComponent, MiniReactElement } from "../src/core/types";
 
 let window: Window;
 let document: Document;
@@ -30,7 +23,7 @@ describe("JSX Runtime Functions", () => {
 		const element = jsx("div", { id: "test" }) as MiniReactElement;
 
 		expect(element.type).toBe("div");
-		expect((element.props as Record<string, unknown>).id).toBe("test");
+		expect((element.props as Record<string, unknown>)["id"]).toBe("test");
 		expect(element.props.children).toEqual([]);
 	});
 
@@ -52,8 +45,8 @@ describe("JSX Runtime Functions", () => {
 	test("jsx() handles key prop", () => {
 		const element = jsx("div", { id: "test" }, "my-key") as MiniReactElement;
 
-		expect((element.props as Record<string, unknown>).key).toBe("my-key");
-		expect((element.props as Record<string, unknown>).id).toBe("test");
+		expect((element.props as Record<string, unknown>)["key"]).toBe("my-key");
+		expect((element.props as Record<string, unknown>)["id"]).toBe("test");
 	});
 
 	test("jsxs() works identically to jsx()", () => {
@@ -75,13 +68,13 @@ describe("JSX Runtime Functions", () => {
 		);
 
 		expect(element.type).toBe("div");
-		expect((element.props as Record<string, unknown>).id).toBe("test");
-		expect((element.props as Record<string, unknown>).key).toBe("key");
+		expect((element.props as Record<string, unknown>)["id"]).toBe("test");
+		expect((element.props as Record<string, unknown>)["key"]).toBe("key");
 
 		// Test that jsxDEV creates similar structure
 		expect(elementWithSource.type).toBe("div");
 		expect(
-			(elementWithSource as unknown as Record<string, unknown>).__source,
+			(elementWithSource as unknown as Record<string, unknown>)["__source"],
 		).toEqual(source);
 	});
 
@@ -133,10 +126,10 @@ describe("JSX Fragment Support", () => {
 		render(fragmentElement, container);
 
 		expect(container.children.length).toBe(2);
-		expect(container.children[0].tagName).toBe("SPAN");
-		expect(container.children[0].textContent).toBe("Hello");
-		expect(container.children[1].tagName).toBe("SPAN");
-		expect(container.children[1].textContent).toBe("World");
+		expect(container.children[0]!.tagName).toBe("SPAN");
+		expect(container.children[0]!.textContent).toBe("Hello");
+		expect(container.children[1]!.tagName).toBe("SPAN");
+		expect(container.children[1]!.textContent).toBe("World");
 	});
 
 	test("Fragment with single child", () => {
@@ -147,8 +140,8 @@ describe("JSX Fragment Support", () => {
 		render(fragmentElement, container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].tagName).toBe("DIV");
-		expect(container.children[0].textContent).toBe("Single child");
+		expect(container.children[0]!.tagName).toBe("DIV");
+		expect(container.children[0]!.textContent).toBe("Single child");
 	});
 
 	test("Fragment with no children", () => {
@@ -168,9 +161,9 @@ describe("JSX Fragment Support", () => {
 		render(fragmentElement, container);
 
 		expect(container.childNodes.length).toBe(3);
-		expect(container.childNodes[0].textContent).toBe("Text node");
-		expect(container.childNodes[1].textContent).toBe("Element");
-		expect(container.childNodes[2].textContent).toBe("42");
+		expect(container.childNodes[0]!.textContent).toBe("Text node");
+		expect(container.childNodes[1]!.textContent).toBe("Element");
+		expect(container.childNodes[2]!.textContent).toBe("42");
 	});
 });
 
@@ -185,8 +178,8 @@ describe("JSX with Functional Components", () => {
 		render(element, container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].tagName).toBe("H1");
-		expect(container.children[0].textContent).toBe("Hello, JSX!");
+		expect(container.children[0]!.tagName).toBe("H1");
+		expect(container.children[0]!.textContent).toBe("Hello, JSX!");
 	});
 
 	test("jsx() with component children", () => {
@@ -201,8 +194,8 @@ describe("JSX with Functional Components", () => {
 		render(jsx(App, null), container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].tagName).toBe("BUTTON");
-		expect(container.children[0].textContent).toBe("Click me");
+		expect(container.children[0]!.tagName).toBe("BUTTON");
+		expect(container.children[0]!.textContent).toBe("Click me");
 	});
 
 	test("jsx() with nested components", () => {
@@ -228,14 +221,14 @@ describe("JSX with Functional Components", () => {
 
 		render(app, container);
 
-		const card = container.children[0] as HTMLElement;
+		const card = container.children[0]! as HTMLElement;
 		expect(card.className).toBe("card");
 		expect(card.children.length).toBe(2);
-		expect(card.children[0].tagName).toBe("H2");
-		expect(card.children[0].textContent).toBe("My Card");
-		expect(card.children[1].className).toBe("content");
-		expect(card.children[1].children[0].tagName).toBe("P");
-		expect(card.children[1].children[0].textContent).toBe("Card content");
+		expect(card.children[0]!.tagName).toBe("H2");
+		expect(card.children[0]!.textContent).toBe("My Card");
+		expect(card.children[1]!.className).toBe("content");
+		expect(card.children[1]!.children[0]!.tagName).toBe("P");
+		expect(card.children[1]!.children[0]!.textContent).toBe("Card content");
 	});
 });
 
@@ -291,10 +284,10 @@ describe("JSX with Hooks", () => {
 
 		render(jsx(MultiState, null), container);
 
-		const nameP = container.children[0].children[0] as HTMLElement;
-		const ageP = container.children[0].children[1] as HTMLElement;
-		const nameButton = container.children[0].children[2] as HTMLElement;
-		const ageButton = container.children[0].children[3] as HTMLElement;
+		const nameP = container.children[0]!.children[0]! as HTMLElement;
+		const ageP = container.children[0]!.children[1]! as HTMLElement;
+		const nameButton = container.children[0]!.children[2]! as HTMLElement;
+		const ageButton = container.children[0]!.children[3]! as HTMLElement;
 
 		expect(nameP.textContent).toBe("Name: Anonymous");
 		expect(ageP.textContent).toBe("Age: 0");
@@ -368,7 +361,7 @@ describe("JSX Error Handling", () => {
 		render(element, container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].textContent).toBe("text");
+		expect(container.children[0]!.textContent).toBe("text");
 	});
 
 	test("jsx() handles empty children array", () => {
@@ -377,7 +370,7 @@ describe("JSX Error Handling", () => {
 		render(element, container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].children.length).toBe(0);
+		expect(container.children[0]!.children.length).toBe(0);
 	});
 
 	test("jsx() handles component returning null", () => {
@@ -402,9 +395,9 @@ describe("JSX Performance and Edge Cases", () => {
 		render(element, container);
 
 		expect(container.children.length).toBe(1);
-		expect(container.children[0].children.length).toBe(100);
-		expect(container.children[0].children[0].textContent).toBe("Item 0");
-		expect(container.children[0].children[99].textContent).toBe("Item 99");
+		expect(container.children[0]!.children.length).toBe(100);
+		expect(container.children[0]!.children[0]!.textContent).toBe("Item 0");
+		expect(container.children[0]!.children[99]!.textContent).toBe("Item 99");
 	});
 
 	test("jsx() maintains referential equality for same inputs", () => {
@@ -415,8 +408,8 @@ describe("JSX Performance and Edge Cases", () => {
 		// Elements should have the same structure but be different objects
 		expect(element1).not.toBe(element2);
 		expect(element1.type).toBe(element2.type);
-		expect((element1.props as Record<string, unknown>).id).toBe(
-			(element2.props as Record<string, unknown>).id,
+		expect((element1.props as Record<string, unknown>)["id"]).toBe(
+			(element2.props as Record<string, unknown>)["id"],
 		);
 	});
 
@@ -425,9 +418,9 @@ describe("JSX Performance and Edge Cases", () => {
 		const element = jsxDEV("div", { id: "test" }, "key", true, source, {});
 
 		expect(element.type).toBe("div");
-		expect((element.props as Record<string, unknown>).id).toBe("test");
-		expect((element.props as Record<string, unknown>).key).toBe("key");
-		expect((element as unknown as Record<string, unknown>).__source).toEqual(
+		expect((element.props as Record<string, unknown>)["id"]).toBe("test");
+		expect((element.props as Record<string, unknown>)["key"]).toBe("key");
+		expect((element as unknown as Record<string, unknown>)["__source"]).toEqual(
 			source,
 		);
 	});

tests/MiniReact.memo.test.ts

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, test } from "bun:test";
-import { createElement, memo, render, useState } from "../src/MiniReact";
+import { createElement, memo, render, useState } from "@/MiniReact";
 
 describe("MiniReact.memo Component Memoization", () => {
 	let container: HTMLElement;

tests/MiniReact.performance.test.ts

@@ -5,7 +5,7 @@ import {
 	startProfiling,
 	stopProfiling,
 	useState,
-} from "../src/MiniReact";
+} from "@/MiniReact";
 
 describe("MiniReact.Performance Tools", () => {
 	let container: HTMLElement;

tests/MiniReact.portals.test.ts

@@ -7,7 +7,7 @@ import {
 	useContext,
 	useEffect,
 	useState,
-} from "../src/MiniReact";
+} from "@/MiniReact";
 
 describe("MiniReact Portal Tests", () => {
 	let container: HTMLElement;