chore: migrate from jsdom to happy-dom for testing environment

packages/ui/src/components/combobox.test.tsx

@@ -138,8 +138,12 @@ describe("ComboboxCollection", () => {
 					<ComboboxInput />
 					<ComboboxContent>
 						<ComboboxList>
-							<ComboboxCollection items={items}>
-								{(item) => <ComboboxItem value={item}>{item}</ComboboxItem>}
+							<ComboboxCollection>
+								{(item) => (
+									<ComboboxItem key={item} value={item}>
+										{item}
+									</ComboboxItem>
+								)}
 							</ComboboxCollection>
 						</ComboboxList>
 					</ComboboxContent>

packages/ui/src/components/form.tsx

@@ -40,12 +40,12 @@ function FormLabel({ className, ...props }: React.ComponentProps<typeof Label>)
 	);
 }
 
-function FormControl(props: useRender.ComponentProps<"div">) {
+function FormControl({ render, ...props }: useRender.ComponentProps<"div">) {
 	const { id, hasError } = useFormItem();
 
 	return useRender({
-		...props,
 		defaultTagName: "div",
+		render,
 		state: { slot: "form-control" },
 		props: {
 			id: `${id}-form-item`,

packages/ui/src/components/resizable.test.tsx

@@ -5,7 +5,7 @@ import { ResizableGroup, ResizablePanel, ResizableSeparator } from "./resizable"
 describe("ResizableGroup", () => {
 	it("renders with data-slot='resizable-panel-group'", () => {
 		const { container } = render(
-			<ResizableGroup direction="horizontal">
+			<ResizableGroup orientation="horizontal">
 				<ResizablePanel>A</ResizablePanel>
 				<ResizableSeparator />
 				<ResizablePanel>B</ResizablePanel>
@@ -16,7 +16,7 @@ describe("ResizableGroup", () => {
 
 	it("merges custom className", () => {
 		const { container } = render(
-			<ResizableGroup direction="horizontal" className="my-group">
+			<ResizableGroup orientation="horizontal" className="my-group">
 				<ResizablePanel>x</ResizablePanel>
 			</ResizableGroup>,
 		);
@@ -27,7 +27,7 @@ describe("ResizableGroup", () => {
 describe("ResizablePanel", () => {
 	it("renders with data-slot='resizable-panel'", () => {
 		const { container } = render(
-			<ResizableGroup direction="horizontal">
+			<ResizableGroup orientation="horizontal">
 				<ResizablePanel>x</ResizablePanel>
 			</ResizableGroup>,
 		);
@@ -38,7 +38,7 @@ describe("ResizablePanel", () => {
 describe("ResizableSeparator", () => {
 	it("renders with data-slot='resizable-handle' and no inner handle by default", () => {
 		const { container } = render(
-			<ResizableGroup direction="horizontal">
+			<ResizableGroup orientation="horizontal">
 				<ResizablePanel>A</ResizablePanel>
 				<ResizableSeparator />
 				<ResizablePanel>B</ResizablePanel>
@@ -52,7 +52,7 @@ describe("ResizableSeparator", () => {
 
 	it("renders inner handle when withHandle=true", () => {
 		const { container } = render(
-			<ResizableGroup direction="horizontal">
+			<ResizableGroup orientation="horizontal">
 				<ResizablePanel>A</ResizablePanel>
 				<ResizableSeparator withHandle />
 				<ResizablePanel>B</ResizablePanel>

packages/ui/src/vitest.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

packages/ui/vitest.config.ts

@@ -4,5 +4,5 @@ import { createVitestProjectConfig } from "../../vitest.shared";
 export default createVitestProjectConfig({
 	name: "@reactive-resume/ui",
 	dirname: fileURLToPath(new URL(".", import.meta.url)),
-	environment: "jsdom",
+	environment: "happy-dom",
 });