test: Migrate deprecated test library

package.json

@@ -37,12 +37,14 @@
     "markdown-it-footnote": "^4.0.0",
     "markdown-it-front-matter": "^0.2.3",
     "next-themes": "^0.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-icons": "^5.5.0",
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.0",
     "@types/markdown-it": "^14.0.0",
     "@types/node": "^24.0.0",
     "@types/react": "^18.2.21",
@@ -60,7 +62,6 @@
     "postcss-preset-env": "^10.0.0",
     "postcss-scss": "^4.0.6",
     "prettier": "^3.0.0",
-    "react-test-renderer": "^18.2.0",
     "sass": "^1.69.5",
     "stylelint": "^16.2.1",
     "stylelint-config-recess-order": "^5.0.0",

src/components/date.test.tsx

@@ -1,8 +1,8 @@
 import { expect, it } from "vitest";
 import { DateString } from "./date";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<DateString dateString="2021-01-01" />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/footer.test.tsx

@@ -1,8 +1,8 @@
 import { expect, it } from "vitest";
 import { Footer } from "./footer";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Footer />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/header.test.tsx

@@ -1,8 +1,8 @@
 import { expect, it } from "vitest";
 import { Header } from "./header";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Header />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/navigation.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { Navigation } from "./navigation";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(
@@ -26,5 +26,5 @@ it("renders correctly", () => {
       ]}
     />,
   );
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/prev-next-link.test.tsx

@@ -1,6 +1,6 @@
 import { expect, it } from "vitest";
 import { PrevNextLink } from "./prev-next-link";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders both prev and next correctly", () => {
   const tree = render(
@@ -9,15 +9,15 @@ it("renders both prev and next correctly", () => {
       nextLinkHref="https://example.com/next"
     />,
   );
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });
 
 it("renders only prev correctly", () => {
   const tree = render(<PrevNextLink prevLinkHref="https://example.com/prev" nextLinkHref={null} />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });
 
 it("renders only next correctly", () => {
   const tree = render(<PrevNextLink prevLinkHref={null} nextLinkHref="https://example.com/next" />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/questions.test.tsx

@@ -1,8 +1,8 @@
 import { expect, it } from "vitest";
 import { Questions } from "./questions";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders correctly", () => {
   const tree = render(<Questions />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/sns-link.test.tsx

@@ -1,13 +1,13 @@
 import { expect, it } from "vitest";
 import { SNSLink } from "./sns-link";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders twitter link correctly", () => {
-  const tree = render(<SNSLink type="twitter" url="https://twitter.com/MikurXina" />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  const tree = render(<SNSLink type="twitter" name="MikuroXina" />);
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });
 
 it("renders github link correctly", () => {
-  const tree = render(<SNSLink type="github" url="https://github.com/MikurXina" />);
-  expect(tree.toJSON()).toMatchSnapshot();
+  const tree = render(<SNSLink type="github" name="MikuroXina" />);
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/components/title.test.tsx

@@ -1,13 +1,13 @@
 import { Subtitle, Title } from "./title";
 import { expect, it } from "vitest";
-import { render } from "../../utils/react-test";
+import { render } from "../utils/react-test";
 
 it("renders title correctly", () => {
   const tree = render(<Title>Epic Title</Title>);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });
 
 it("renders subtitle correctly", () => {
   const tree = render(<Subtitle>Epic Subtitle</Subtitle>);
-  expect(tree.toJSON()).toMatchSnapshot();
+  expect(tree.container.innerHTML).toMatchSnapshot();
 });

src/utils/react-test.tsx

@@ -1,7 +1,20 @@
-import reactTestRenderer, { ReactTestRenderer, TestRendererOptions } from "react-test-renderer";
-import { ReactElement } from "react";
+import React, { ReactNode } from "react";
+import { RenderOptions, RenderResult, render } from "@testing-library/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { ColorModeProvider } from "./color-mode";
+import { system } from "../lib/theme";
+import { yearContext } from "../lib/year-context";
 
-export const render = (
-  ui: ReactElement,
-  options?: TestRendererOptions | undefined,
-): ReactTestRenderer => reactTestRenderer.create(ui, options);
+const Providers = ({ children }: { children: ReactNode }): React.JSX.Element => (
+  <yearContext.Provider value={new Date().getFullYear()}>
+    <ChakraProvider value={system}>
+      <ColorModeProvider children={children} />
+    </ChakraProvider>
+  </yearContext.Provider>
+);
+
+export const customRender = (ui: ReactNode, options?: RenderOptions): RenderResult =>
+  render(ui, { wrapper: Providers, ...options });
+
+export * from "@testing-library/react";
+export { customRender as render };

vite.config.ts

@@ -6,8 +6,14 @@ export default defineConfig({
   test: {
     environment: "jsdom",
     // NOTE: https://github.com/chakra-ui/chakra-ui/issues/6783#issuecomment-1283788233
-    deps: {
-      fallbackCJS: true,
+    server: {
+      deps: {
+        fallbackCJS: true,
+      },
     },
+    setupFiles: ["vitest-cleanup.ts"],
+  },
+  ssr: {
+    noExternal: ["@chakra-ui/react"],
   },
 });

vitest-cleanup.ts

@@ -0,0 +1,6 @@
+import { afterEach } from "vitest";
+import { cleanup } from "@testing-library/react";
+
+afterEach(() => {
+  cleanup();
+});