Impl test by vitest for components

tslib/react/package.json

@@ -8,7 +8,8 @@
   "types": "types/index.d.ts",
   "scripts": {
     "build": "tsc -d",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest run"
   },
   "files": [
     "pkg",
@@ -45,12 +46,15 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/test": "^8.0.4",
+    "@testing-library/react": "^14.2.2",
     "@types/plotly.js-dist-min": "^2.3.4",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react-swc": "^3.5.0",
+    "jsdom": "^24.0.0",
     "storybook": "^8.0.4",
     "typescript": "^5.2.2",
-    "vite": "^5.1.0"
+    "vite": "^5.1.0",
+    "vitest": "^1.4.0"
   }
 }

tslib/react/test/PlotHistory.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react"
+import React from "react"
+import * as Optuna from "@optuna/types"
+import { PlotHistory } from "../src/components/PlotHistory"
+import { describe, test, expect } from "vitest"
+
+describe("PlotHistory Tests", async () => {
+  const setup = ({
+    study,
+    dataTestId,
+  }: { study: Optuna.Study; dataTestId: string }) => {
+    const Wrapper = ({
+      dataTestId,
+      children,
+    }: {
+      dataTestId: string
+      children: React.ReactNode
+    }) => <div data-testid={dataTestId}>{children}</div>
+    return render(
+      <Wrapper dataTestId={dataTestId}>
+        <PlotHistory study={study} />
+      </Wrapper>
+    )
+  }
+
+  for (const study of window.mockStudies) {
+    test(`PlotHistory (studyId: ${study.study_id})`, () => {
+      setup({ study, dataTestId: `plot-history-${study.study_id}` })
+      expect(screen.getByTestId(`plot-history-${study.study_id}`)).toBeTruthy()
+    })
+  }
+})

tslib/react/test/TrialTable.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react"
+import React from "react"
+import * as Optuna from "@optuna/types"
+import { TrialTable } from "../src/components/TrialTable"
+import { describe, test, expect } from "vitest"
+
+describe("TrialTable Tests", async () => {
+  const setup = ({
+    study,
+    dataTestId,
+  }: { study: Optuna.Study; dataTestId: string }) => {
+    const Wrapper = ({
+      dataTestId,
+      children,
+    }: {
+      dataTestId: string
+      children: React.ReactNode
+    }) => <div data-testid={dataTestId}>{children}</div>
+    return render(
+      <Wrapper dataTestId={dataTestId}>
+        <TrialTable study={study} />
+      </Wrapper>
+    )
+  }
+
+  for (const study of window.mockStudies) {
+    test(`TrialTable (studyId: ${study.study_id})`, () => {
+      setup({ study, dataTestId: `trial-table-${study.study_id}` })
+      expect(screen.getByTestId(`trial-table-${study.study_id}`)).toBeTruthy()
+    })
+  }
+})

tslib/react/test/setup_studies.ts

@@ -0,0 +1,26 @@
+import fs from "node:fs"
+import * as Optuna from "@optuna/types"
+import { loadStorageFromFile } from "../src/utils/loadStorageFromFile"
+
+declare global {
+  interface Window {
+    mockStudies: Optuna.Study[]
+  }
+}
+
+const data = fs.readFileSync("./test/asset/journal.log")
+const blob = new Blob([data])
+const file = new File([blob], "journal.log")
+const mockStudies: Optuna.Study[] = []
+await loadStorageFromFile(file, (value) => {
+  if (Array.isArray(value)) {
+    mockStudies.push(...value)
+  } else {
+    mockStudies.push(...value([]))
+  }
+})
+window.mockStudies = mockStudies
+
+// mock window.URL.createObjectURL in JSDOM
+window.HTMLCanvasElement.prototype.getContext = () => null
+window.URL.createObjectURL = () => ""

tslib/react/vite.config.ts

@@ -1,9 +1,18 @@
 import react from "@vitejs/plugin-react-swc"
-import { defineConfig } from "vite"
+import { UserConfig, defineConfig } from "vite"
+import { InlineConfig } from "vitest"
+
+interface VitestConfig extends UserConfig {
+  test: InlineConfig
+}
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./test/setup_studies.ts"],
+  },
   optimizeDeps: {
     exclude: ["@sqlite.org/sqlite-wasm"],
   },
@@ -13,4 +22,4 @@ export default defineConfig({
       "Cross-Origin-Embedder-Policy": "require-corp",
     },
   },
-})
+}) as VitestConfig