diff --git a/tslib/react/test/PlotImportance.test.tsx b/tslib/react/test/PlotImportance.test.tsx
new file mode 100644
index 00000000..5b2d26ab
--- /dev/null
+++ b/tslib/react/test/PlotImportance.test.tsx
@@ -0,0 +1,44 @@
+import * as Optuna from "@optuna/types"
+import { render, screen } from "@testing-library/react"
+import React from "react"
+import { describe, expect, test } from "vitest"
+import { PlotImportance } from "../src/components/PlotImportance"
+
+describe("PlotImportance Tests", async () => {
+  const setup = ({
+    study,
+    importance,
+    dataTestId,
+  }: {
+    study: Optuna.Study
+    importance: Optuna.ParamImportance[][]
+    dataTestId: string
+  }) => {
+    const Wrapper = ({
+      dataTestId,
+      children,
+    }: {
+      dataTestId: string
+      children: React.ReactNode
+    }) => <div data-testid={dataTestId}>{children}</div>
+    return render(
+      <Wrapper dataTestId={dataTestId}>
+        <PlotImportance study={study} importance={importance} />
+      </Wrapper>
+    )
+  }
+
+  for (const study of window.mockStudies) {
+    test(`PlotImportance (study name: ${study.study_name})`, () => {
+      const importance = window.mockImportances[study.study_name] ?? []
+      setup({
+        study,
+        importance,
+        dataTestId: `plot-importance-${study.study_id}`,
+      })
+      expect(
+        screen.getByTestId(`plot-importance-${study.study_id}`)
+      ).toBeInTheDocument()
+    })
+  }
+})
diff --git a/tslib/react/test/PlotIntermediateValues.test.tsx b/tslib/react/test/PlotIntermediateValues.test.tsx
new file mode 100644
index 00000000..c98b726f
--- /dev/null
+++ b/tslib/react/test/PlotIntermediateValues.test.tsx
@@ -0,0 +1,38 @@
+import * as Optuna from "@optuna/types"
+import { render, screen } from "@testing-library/react"
+import React from "react"
+import { describe, expect, test } from "vitest"
+import { PlotIntermediateValues } from "../src/components/PlotIntermediateValues"
+
+describe("PlotIntermediateValues 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}>
+        <PlotIntermediateValues
+          trials={study.trials}
+          includePruned={false}
+          logScale={false}
+        />
+      </Wrapper>
+    )
+  }
+
+  for (const study of window.mockStudies) {
+    test(`PlotIntermediateValues (study name: ${study.study_name})`, () => {
+      setup({ study, dataTestId: `plot-intermediatevalues-${study.study_id}` })
+      expect(
+        screen.getByTestId(`plot-intermediatevalues-${study.study_id}`)
+      ).toBeInTheDocument()
+    })
+  }
+})