run example jest & vitest in next-yak CI

package.json

@@ -10,7 +10,7 @@
     "build": "pnpm run --filter=next-yak build",
     "watch": "pnpm run --filter=next-yak watch",
     "example": "pnpm --filter=next-yak-example run dev",
-    "test": "pnpm --filter=next-yak --filter=webpack-tests run \"/test($|:types)/\"",
+    "test": "pnpm run build && pnpm --filter=next-yak --filter=webpack-tests --filter=next-yak-example run \"/test($|:types)/\"",
     "test:watch": "pnpm --filter=next-yak run test:watch",
     "package:types": "npx --package=@arethetypeswrong/cli attw --pack packages/next-yak",
     "prettier": "pnpm run --recursive --if-present prettier"

packages/benchmark/package.json

@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "next": "14.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "next-yak": "workspace:*",
     "styled-components": "6.1.1"
   },

packages/example/app/__tests__/Clock.test.tsx

@@ -0,0 +1,9 @@
+/// <reference types="jest" />
+import React from "react";
+import { render } from "@testing-library/react";
+import { Clock } from "../Clock";
+
+test("renders Clock component", () => {
+  const { asFragment } = render(<Clock />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/example/app/__tests__/ClockHands.test.tsx

@@ -0,0 +1,9 @@
+/// <reference types="jest" />
+import React from "react";
+import { render } from "@testing-library/react";
+import { ClockHands } from "../ClockHands";
+
+test("renders ClockHands component", () => {
+  const { asFragment } = render(<ClockHands />);
+  expect(asFragment()).toMatchSnapshot();
+});

packages/example/app/__tests__/__snapshots__/Clock.test.tsx.snap

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders Clock component 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    <div
+      class=""
+    >
+      <div
+        class=""
+      />
+      <div
+        class=""
+        index="0"
+      >
+        12
+      </div>
+      <div
+        class=""
+        index="1"
+      >
+        1
+      </div>
+      <div
+        class=""
+        index="2"
+      >
+        2
+      </div>
+      <div
+        class=""
+        index="3"
+      >
+        3
+      </div>
+      <div
+        class=""
+        index="4"
+      >
+        4
+      </div>
+      <div
+        class=""
+        index="5"
+      >
+        5
+      </div>
+      <div
+        class=""
+        index="6"
+      >
+        6
+      </div>
+      <div
+        class=""
+        index="7"
+      >
+        7
+      </div>
+      <div
+        class=""
+        index="8"
+      >
+        8
+      </div>
+      <div
+        class=""
+        index="9"
+      >
+        9
+      </div>
+      <div
+        class=""
+        index="10"
+      >
+        10
+      </div>
+      <div
+        class=""
+        index="11"
+      >
+        11
+      </div>
+      <div
+        class=""
+      />
+      <div
+        class=""
+      />
+      <div
+        class=""
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

packages/example/app/__tests__/__snapshots__/ClockHands.test.tsx.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders ClockHands component 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  />
+  <div
+    class=""
+  />
+  <div
+    class=""
+  />
+</DocumentFragment>
+`;

packages/example/jest.config.js

@@ -6,6 +6,7 @@ const createJestConfig = nextJest({ dir: './' })
 // Any custom config you want to pass to Jest
 const customJestConfig = {
   setupFilesAfterEnv: [],
+  testEnvironment: 'jsdom',
 }
 
 // createJestConfig is exported in this way to ensure that next/jest can load the Next.js configuration, which is async

packages/example/package.json

@@ -9,23 +9,29 @@
     "build:yak": "pnpm run --filter next-yak build",
     "start": "next start",
     "lint": "next lint",
-    "test": "jest",
+    "test": "pnpm run test:vitest && pnpm run test:jest",
+    "test:vitest": "vitest run --globals --environment=jsdom",
+    "test:jest": "jest",
     "test:watch": "jest --watch -u"
   },
   "dependencies": {
     "@types/node": "20.4.5",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.7",
     "next": "14.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "typescript": "5.5.2",
-    "next-yak": "workspace:*"
+    "next-yak": "workspace:*",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "typescript": "5.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@types/jest": "^29.5.12",
     "jest": "^29.6.2",
-    "jest-environment-jsdom": "^29.6.2"
+    "vitest": "0.34.5",
+    "jest-environment-jsdom": "^29.6.2",
+    "jsdom": "^22.1.0"
   }
 }

packages/next-yak/package.json

@@ -87,8 +87,8 @@
     "@types/react-test-renderer": "^18.0.3",
     "jsdom": "^22.1.0",
     "next": "14.2.4",
-    "react": "^18.2.0",
-    "react-test-renderer": "^18.2.0",
+    "react": "18.3.1",
+    "react-test-renderer": "18.3.1",
     "typescript": "5.5.2",
     "vite": "^4.4.9",
     "vitest": "0.34.5",

packages/playground/package.json

@@ -25,8 +25,8 @@
     "@babel/standalone": "^7.24.4",
     "monaco-editor": "^0.46.0",
     "next-yak": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-resizable-panels": "^2.0.16"
   },
   "devDependencies": {