Is this unmockable?

[EricaJesse]

I want to preface this by saying I know I'm an idiot and that I'm sure zustand was not intended to be used the way I'm using it. I am having a hell of a time mocking this file though due to my using subscribeWithSelector. I have mocked similarly setup stores without the subscribeWithSelector just fine, but this one keeps giving me

Error: Uncaught [TypeError: __vite_ssr_import_3__.usePlotStore.subscribe is not a function]

Here's my test file thus far:

import { render, screen } from "@testing-library/react";
import { vi, describe, test, expect, beforeEach } from "vitest";
import PlotScriptingGrid from "../../plotting/PlotScriptingGrid.tsx";
import {
  mockCurrentDashboard,
  mockDashboardArray,
} from "../mockDashboardAndPlot.ts";

const goToDashboardView = vi.fn();
const setSelectedDashboardId = vi.fn();
const selectedDashboardId = mockCurrentDashboard.id;
const setCurrentPlotConfig = vi.fn();
const addPlotToDashboard = vi.fn();
const removePlotFromDashboard = vi.fn();
const setCurrentDashboard = vi.fn();

vi.mock("../../store/VisibilityStore.tsx", () => ({
  useVisibilityStore: () => ({
    goToDashboardView,
    selectedDashboardId: selectedDashboardId,
    setSelectedDashboardId,
  }),
}));

vi.mock("../../store/DashboardStore.tsx", () => {
  return {
    useDashboardStore: () => ({
      dashboards: mockDashboardArray,
      addPlotToDashboard,
      removePlotFromDashboard,
      setCurrentDashboard,
    }),
  };
});

vi.mock("../../store/PlotStore.tsx", () => {
  return {
    usePlotStore: () => ({
      setCurrentPlotConfig,
      subscribe: vi.fn(),
      currentPlotConfig: null,
      setPlotLoading: vi.fn(),
      setPlotLoaded: vi.fn(),
      setPythonScriptError: vi.fn(),
    }),
  };
});

describe("PlotScriptingGrid tests", () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  test("renders PlotScriptingGrid with all necessary components", () => {
    render(<PlotScriptingGrid editingPlot={null} />);

    expect(screen.getByText("Plot Preview")).toBeInTheDocument();
    expect(screen.getByText("Editor")).toBeInTheDocument();
    expect(screen.getByText("Preview")).toBeInTheDocument();
    expect(screen.getByText("Discard")).toBeInTheDocument();
  });

  test("Preview button is disabled when conditions are not met", () => {
    render(<PlotScriptingGrid editingPlot={null} />);
    const previewButton = screen.getByText("Preview");
    expect(previewButton).toBeDisabled();
  });
});

and my embarrassingly stupid store

import { create } from "zustand";
import { Data as PlotData, Layout } from "plotly.js";
import { QueryBlock } from "./QueryBlockStore.tsx";
import { useDashboardStore } from "./DashboardStore.tsx";
import { v4 as uuidv4 } from "uuid";
import { subscribeWithSelector } from "zustand/middleware";
import { placeholderScript } from "../plotting/pyodide/StartUpScripts.tsx";
import { CsvData } from "./CsvStore.tsx";
import { DataType } from "../helpers/enums.tsx";

export interface PlotConfig {
  type: "plot";
  id: string;
  data: PlotData[];
  layout: Partial<Layout>;
  pythonScript: string;
  name?: string;
  selectedQueryBlocks?: QueryBlock[];
  csvData?: CsvData;
  plotLoaded: boolean;
  plotLoading: boolean;
  pythonScriptError: Error | null;
  dataType?: DataType;
}

type PlotConfigState = {
  initializePlot: () => void;
  plotBlocks: QueryBlock[] | null;
  currentPlotConfig: PlotConfig | null;
  globalPlotColor: string | null;
  globalColorDb: string | null;
  setPlotBlocks: (blocks: QueryBlock[]) => void;
  setCurrentPlotConfig: (config: PlotConfig | null) => void;
  setGlobalPlotColor: (color: string | null) => void;
  setGlobalColorDb: (db: string | null) => void;
  pythonScriptError: Error | null;
  setPythonScript: (value: string) => void;
  toggleQueryBlockForPlot: (plotId: string, queryBlock: QueryBlock) => void;
  setQueryBlocksForCurrentPlot: (queryBlocks: QueryBlock[]) => void;
  setCsvDataForCurrentPlot: (csvData: CsvData) => void;
  clearCsvDataForCurrentPlot: () => void;
  updatePlotInDashboard: (
    dashboardId: string,
    plotId: string,
    updatedConfig: PlotConfig,
  ) => void;
  addQueryBlockToCurrentPlot: (queryBlock: QueryBlock) => void;
  plotLoading: boolean;
  plotLoaded: boolean;
  setPlotLoading: (plotId: string, value: boolean) => void;
  setPlotLoaded: (plotId: string, value: boolean) => void;
  setPythonScriptError: (plotId: string, error: Error | null) => void;
  importPlotConfig: (config: PlotConfig) => void;
};

export const usePlotStore = create<PlotConfigState>()(
  subscribeWithSelector((set, get) => ({
    plotBlocks: null,
    currentPlotConfig: null,
    globalPlotColor: null,
    globalColorDb: null,
    pythonScript: placeholderScript(),
    plotLoading: false,
    pythonScriptError: null,
    plotLoaded: false,

    initializePlot: () => {
      const newPlot: PlotConfig = {
        type: "plot",
        id: uuidv4(),
        data: [],
        layout: {},
        pythonScript: placeholderScript(),
        name: "",
        selectedQueryBlocks: [],
        plotLoaded: false,
        plotLoading: false,
        pythonScriptError: null,
      };
      set({ currentPlotConfig: newPlot });
    },

    setPlotBlocks: (blocks: QueryBlock[]) => {
      set({ plotBlocks: blocks });
    },

    setCurrentPlotConfig: (config: PlotConfig | null) => {
      set({ currentPlotConfig: config });
    },

    setGlobalPlotColor: (color: string | null) => {
      set({ globalPlotColor: color });
    },

    setGlobalColorDb: (db: string | null) => {
      set({ globalColorDb: db });
    },

    importPlotConfig: (config: PlotConfig) => {
      set({ currentPlotConfig: config });
    },

    setPythonScript: (script: string) => {
      set((state) => {
        const currentPlotConfig = state.currentPlotConfig;
        if (currentPlotConfig) {
          const updatedConfig = {
            ...currentPlotConfig,
            pythonScript: script,
          };
          return { currentPlotConfig: updatedConfig };
        }
        return state;
      });
    },

    setQueryBlocksForCurrentPlot: (queryBlocks: QueryBlock[]) => {
      set((state) => {
        const currentPlotConfig = state.currentPlotConfig;
        if (currentPlotConfig) {
          const updatedConfig = {
            ...currentPlotConfig,
            selectedQueryBlocks: queryBlocks,
            csvData: undefined, // Ensure csvData is cleared if query blocks are set
            pythonScript: currentPlotConfig.pythonScript,
          };
          return { currentPlotConfig: updatedConfig };
        }
        return state;
      });
    },

    setCsvDataForCurrentPlot: (csvData: CsvData) => {
      set((state) => {
        const currentPlotConfig = state.currentPlotConfig;
        if (currentPlotConfig) {
          const updatedConfig = {
            ...currentPlotConfig,
            csvData: csvData,
            selectedQueryBlocks: undefined, // Ensure query blocks are cleared if csvData is set
            pythonScript: currentPlotConfig.pythonScript,
          };
          return { currentPlotConfig: updatedConfig };
        }
        return state;
      });
    },

    clearCsvDataForCurrentPlot: () => {
      set((state) => {
        const currentPlotConfig = state.currentPlotConfig;
        if (currentPlotConfig) {
          const updatedConfig = {
            ...currentPlotConfig,
            csvData: undefined,
          };
          return { currentPlotConfig: updatedConfig };
        }
        return state;
      });
    },

    toggleQueryBlockForPlot: (plotId: string, queryBlock: QueryBlock) => {
      const { currentPlotConfig } = get();
      if (
        currentPlotConfig &&
        currentPlotConfig.id === plotId &&
        !currentPlotConfig.csvData
      ) {
        const isSelected = currentPlotConfig.selectedQueryBlocks?.find(
          (qb) => qb.id === queryBlock.id,
        );
        const updatedSelectedQueryBlocks = isSelected
          ? currentPlotConfig.selectedQueryBlocks?.filter(
              (qb) => qb.id !== queryBlock.id,
            )
          : [...(currentPlotConfig.selectedQueryBlocks || []), queryBlock];

        const updatedConfig = {
          ...currentPlotConfig,
          selectedQueryBlocks: updatedSelectedQueryBlocks,
          pythonScript: currentPlotConfig.pythonScript,
        };
        set({ currentPlotConfig: updatedConfig });
      }
    },

    addQueryBlockToCurrentPlot: (queryBlock: QueryBlock) => {
      set((state) => {
        const currentPlotConfig = state.currentPlotConfig;
        if (currentPlotConfig && !currentPlotConfig.csvData) {
          const updatedSelectedQueryBlocks = [
            ...(currentPlotConfig.selectedQueryBlocks || []),
            queryBlock,
          ];
          const updatedPlotConfig = {
            ...currentPlotConfig,
            selectedQueryBlocks: updatedSelectedQueryBlocks,
            pythonScript: currentPlotConfig.pythonScript,
          };
          return { currentPlotConfig: updatedPlotConfig };
        }
        return state;
      });
    },

    updatePlotInDashboard: (dashboardId, plotId, updatedConfig) => {
      set((state) => {
        const { dashboards } = useDashboardStore.getState();
        const dashboard = dashboards.find((d) => d.id === dashboardId);
        if (dashboard) {
          const updatedPlots = dashboard.plots.map((plot) =>
            plot.id === plotId ? { ...plot, ...updatedConfig } : plot,
          );
          const updatedDashboard = {
            ...dashboard,
            plots: updatedPlots,
          };
          const updatedDashboards = dashboards.map((d) =>
            d.id === dashboardId ? updatedDashboard : d,
          );
          useDashboardStore.setState({ dashboards: updatedDashboards });
        }
        return state;
      });
    },

    setPlotLoading: (plotId: string, value: boolean) => {
      set((state) => ({
        currentPlotConfig:
          state.currentPlotConfig?.id === plotId
            ? { ...state.currentPlotConfig, plotLoading: value }
            : state.currentPlotConfig,
      }));
    },

    setPlotLoaded: (plotId: string, value: boolean) => {
      set((state) => ({
        currentPlotConfig:
          state.currentPlotConfig?.id === plotId
            ? { ...state.currentPlotConfig, plotLoaded: value }
            : state.currentPlotConfig,
      }));
    },

    setPythonScriptError: (plotId: string, error: Error | null) => {
      set((state) => {
        const updatedCurrentPlotConfig =
          state.currentPlotConfig?.id === plotId
            ? { ...state.currentPlotConfig, pythonScriptError: error }
            : state.currentPlotConfig;
        const { dashboards } = useDashboardStore.getState();
        const dashboardIndex = dashboards.findIndex((d) =>
          d.plots.some((p) => p.id === plotId),
        );
        if (dashboardIndex !== -1) {
          const plotIndex = dashboards[dashboardIndex].plots.findIndex(
            (p) => p.id === plotId,
          );
          if (plotIndex !== -1) {
            dashboards[dashboardIndex].plots[plotIndex].pythonScriptError =
              error;
            useDashboardStore.setState({ dashboards });
          }
        }
        return { currentPlotConfig: updatedCurrentPlotConfig };
      });
    },
  })),
);