Migrate more jest tests to vitest

src/components/AstroPiModel/AstroPiControls/MotionInput.test.jsx

@@ -7,8 +7,8 @@ import Sk from "skulpt";
 
 let container;
 let store;
-const start_motion_function = jest.fn();
-const stop_motion_function = jest.fn();
+const start_motion_function = vi.fn();
+const stop_motion_function = vi.fn();
 
 describe("No motion and code running", () => {
   beforeEach(() => {

src/components/AstroPiModel/FlightCase.test.jsx

@@ -13,7 +13,7 @@ import FlightCase from "./FlightCase";
 // By mocking @react-three/drei to return a scene synchronously, we ensure that
 // the event handlers are properly registered and the tests can run as
 // expected.
-jest.mock("@react-three/drei", () => ({
+vi.mock("@react-three/drei", () => ({
   useGLTF: () => ({
     scene: {
       getObjectByName: () => ({ material: null }),

src/components/AstroPiModel/OrientationPanel/OrientationPanel.test.jsx

@@ -3,7 +3,7 @@ import { render } from "@testing-library/react";
 import OrientationPanel from "./OrientationPanel";
 
 let panel;
-const resetFunction = jest.fn();
+const resetFunction = vi.fn();
 
 beforeAll(() => {
   panel = render(

src/components/AstroPiModel/OrientationPanel/OrientationResetButton.test.jsx

@@ -3,7 +3,7 @@ import { render, fireEvent } from "@testing-library/react";
 import OrientationResetButton from "./OrientationResetButton";
 
 let resetButton;
-const resetFunction = jest.fn();
+const resetFunction = vi.fn();
 
 beforeEach(() => {
   resetButton = render(

src/components/AstroPiModel/Simulator.test.jsx

@@ -16,15 +16,15 @@ test("Three canvas renders", () => {
 });
 
 test("Moving pointer over model does not change orientation", () => {
-  const updateOrientation = jest.fn();
+  const updateOrientation = vi.fn();
   const simulator = render(<Simulator updateOrientation={updateOrientation} />);
   const canvas = simulator.container.querySelector("canvas");
   fireEvent.pointerMove(canvas);
   expect(updateOrientation).not.toHaveBeenCalled();
 });
 
 test("Dragging model changes orientation", async () => {
-  const updateOrientation = jest.fn();
+  const updateOrientation = vi.fn();
   const simulator = render(<Simulator updateOrientation={updateOrientation} />);
   const canvas = simulator.container.querySelector("canvas");
   fireEvent.pointerDown(canvas);
@@ -33,7 +33,7 @@ test("Dragging model changes orientation", async () => {
 });
 
 test("Dragging before model has loaded does not throw", () => {
-  const updateOrientation = jest.fn();
+  const updateOrientation = vi.fn();
   const loadedMod = window.mod;
   window.mod = undefined;
 

src/components/DownloadButton/DownloadButton.test.jsx

@@ -8,12 +8,12 @@ import JSZip from "jszip";
 import JSZipUtils from "jszip-utils";
 import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 
-jest.mock("file-saver");
-jest.mock("jszip");
-jest.mock("jszip-utils", () => ({
-  getBinaryContent: jest.fn(),
+vi.mock("file-saver");
+vi.mock("jszip");
+vi.mock("jszip-utils", () => ({
+  default: { getBinaryContent: vi.fn() },
 }));
-jest.mock("../../utils/scratchIframe");
+vi.mock("../../utils/scratchIframe");
 
 describe("Downloading project with name set", () => {
   let downloadButton;

src/components/Editor/EditorInput/EditorInput.test.jsx

@@ -11,14 +11,14 @@ import {
 import { matchMedia, setMedia } from "mock-match-media";
 import { MOBILE_BREAKPOINT } from "../../../utils/mediaQueryBreakpoints";
 
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
 
 let mockMediaQuery = (query) => {
   return matchMedia(query).matches;
 };
 
-jest.mock("react-responsive", () => ({
-  ...jest.requireActual("react-responsive"),
+vi.mock("react-responsive", async () => ({
+  ...(await vi.importActual("react-responsive")),
   useMediaQuery: ({ query }) => mockMediaQuery(query),
 }));
 

src/components/Editor/Runners/HtmlRunner/HtmlRenderer.test.jsx

@@ -11,8 +11,8 @@ let mockMediaQuery = (query) => {
   return matchMedia(query).matches;
 };
 
-jest.mock("react-responsive", () => ({
-  ...jest.requireActual("react-responsive"),
+vi.mock("react-responsive", async () => ({
+  ...(await vi.importActual("react-responsive")),
   useMediaQuery: ({ query }) => mockMediaQuery(query),
 }));
 

src/components/Menus/ContextMenu/ContextMenu.test.jsx

@@ -4,7 +4,7 @@ import { axe, toHaveNoViolations } from "jest-axe";
 import ContextMenu from "./ContextMenu";
 
 expect.extend(toHaveNoViolations);
-const action1 = jest.fn();
+const action1 = vi.fn();
 
 describe("With file items", () => {
   beforeEach(() => {

src/components/Menus/Sidebar/DownloadPanel/DownloadPanel.test.jsx

@@ -5,16 +5,16 @@ import { MemoryRouter } from "react-router";
 import configureStore from "redux-mock-store";
 import FileSaver from "file-saver";
 
-jest.mock("file-saver");
-jest.mock("jszip");
-jest.mock("jszip-utils", () => ({
-  getBinaryContent: jest.fn(),
+vi.mock("file-saver");
+vi.mock("jszip");
+vi.mock("jszip-utils", () => ({
+  default: { getBinaryContent: vi.fn() },
 }));
 
 let container;
 
-const logInHandler = jest.fn();
-const signUpHandler = jest.fn();
+const logInHandler = vi.fn();
+const signUpHandler = vi.fn();
 
 beforeAll(() => {
   document.addEventListener("editor-logIn", logInHandler);

src/components/Menus/Sidebar/InstructionsPanel/InstructionsPanel.test.jsx

@@ -6,11 +6,13 @@ import { act } from "react";
 import Modal from "react-modal";
 import { scratchblocksInit } from "../../../../utils/scratchblocks";
 import { renderWithProviders } from "../../../../utils/renderWithProviders";
+import demoInstructions from "../../../../assets/markdown/demoInstructions.md?raw";
+import populateMarkdownTemplate from "../../../../utils/populateMarkdownTemplate";
 
-window.HTMLElement.prototype.scrollTo = jest.fn();
+window.HTMLElement.prototype.scrollTo = vi.fn();
 
-jest.mock("../../../../utils/scratchblocks", () => ({
-  scratchblocksInit: jest.fn(),
+vi.mock("../../../../utils/scratchblocks", () => ({
+  scratchblocksInit: vi.fn(),
 }));
 
 // Stand-in for the real (jsdom-unfriendly) scratchblocks SVG rendering: swap
@@ -305,7 +307,7 @@ describe("When instructionsEditable is true", () => {
       });
 
       expect(store.getState().editor.project.instructions).toBe(
-        "demoInstructions.md",
+        populateMarkdownTemplate(demoInstructions, (str) => str),
       );
     });
 

src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.test.jsx

@@ -76,7 +76,7 @@ describe("When on a middle step", () => {
   });
 
   test("Clicking previous step button calls scrollTo when panelRef is provided", () => {
-    const mockScrollTo = jest.fn();
+    const mockScrollTo = vi.fn();
     const panelRef = { current: { scrollTo: mockScrollTo } };
 
     renderProgressBarOnStep(1, 3, panelRef);
@@ -93,7 +93,7 @@ describe("When on a middle step", () => {
   });
 
   test("Clicking next step button calls scrollTo when panelRef is provided", () => {
-    const mockScrollTo = jest.fn();
+    const mockScrollTo = vi.fn();
     const panelRef = { current: { scrollTo: mockScrollTo } };
 
     renderProgressBarOnStep(1, 3, panelRef);
@@ -110,7 +110,7 @@ describe("When on a middle step", () => {
   });
 
   test("Does not call scrollTo when panelRef is null", () => {
-    const mockScrollTo = jest.fn();
+    const mockScrollTo = vi.fn();
 
     renderProgressBarOnStep(1, 3, null);
 
@@ -123,7 +123,7 @@ describe("When on a middle step", () => {
   });
 
   test("Does not call scrollTo when panelRef.current is null", () => {
-    const mockScrollTo = jest.fn();
+    const mockScrollTo = vi.fn();
     const panelRef = { current: null };
 
     renderProgressBarOnStep(1, 3, panelRef);

src/components/Menus/Sidebar/ProjectsPanel/ProjectsPanel.test.jsx

@@ -6,7 +6,7 @@ import { MemoryRouter } from "react-router-dom";
 
 import ProjectsPanel from "./ProjectsPanel";
 
-document.dispatchEvent = jest.fn();
+document.dispatchEvent = vi.fn();
 
 const initialState = {
   editor: {

src/components/Menus/Sidebar/SettingsPanel/ThemeToggle/ThemeToggle.test.jsx

@@ -3,7 +3,7 @@ import { act, render, fireEvent, screen } from "@testing-library/react";
 import ThemeToggle from "./ThemeToggle";
 import { Cookies, CookiesProvider } from "react-cookie";
 
-const themeUpdatedHandler = jest.fn();
+const themeUpdatedHandler = vi.fn();
 
 beforeAll(() => {
   document.addEventListener("editor-themeUpdated", (e) =>
@@ -20,11 +20,11 @@ describe("When default theme is light mode and cookie unset", () => {
       matches: false,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     });
     cookies = new Cookies();
     toggleContainer = render(
@@ -68,11 +68,11 @@ describe("When default theme is dark mode and cookie unset", () => {
       matches: true,
       media: query,
       onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      dispatchEvent: jest.fn(),
+      addListener: vi.fn(), // Deprecated
+      removeListener: vi.fn(), // Deprecated
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+      dispatchEvent: vi.fn(),
     });
     cookies = new Cookies();
     toggleContainer = render(

src/components/Menus/Sidebar/SidebarBar.test.jsx

@@ -4,7 +4,7 @@ import configureStore from "redux-mock-store";
 import { Provider } from "react-redux";
 import SidebarBar from "./SidebarBar";
 
-const toggleOption = jest.fn();
+const toggleOption = vi.fn();
 
 const mockStore = configureStore([]);
 const initialState = {

src/components/Menus/Sidebar/SidebarBarOption.test.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import SidebarBarOption from "./SidebarBarOption";
 
-const toggleOption = jest.fn();
+const toggleOption = vi.fn();
 
 beforeEach(() => {
   render(

src/components/Mobile/MobileProject/MobileProject.test.jsx

@@ -5,7 +5,7 @@ import configureStore from "redux-mock-store";
 import MobileProject from "./MobileProject";
 import { showSidebar } from "../../../redux/EditorSlice";
 
-window.HTMLElement.prototype.scrollIntoView = jest.fn();
+window.HTMLElement.prototype.scrollIntoView = vi.fn();
 
 const middlewares = [];
 const mockStore = configureStore(middlewares);

src/components/Modals/ErrorModal.test.jsx

@@ -120,7 +120,7 @@ test("Additional closeModal function fired", () => {
     },
   };
   const store = mockStore(initialState);
-  const testOnClose = jest.fn();
+  const testOnClose = vi.fn();
 
   render(
     <Provider store={store}>

src/components/Modals/GeneralModal.test.jsx

@@ -2,8 +2,8 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import GeneralModal from "./GeneralModal";
 
-const defaultCallback = jest.fn();
-const closeModal = jest.fn();
+const defaultCallback = vi.fn();
+const closeModal = vi.fn();
 
 describe("With close button", () => {
   beforeEach(() => {
@@ -16,7 +16,7 @@ describe("With close button", () => {
           defaultCallback={defaultCallback}
           heading="My modal heading"
           text={[{ content: "Paragraph1", type: "paragraph" }]}
-          buttons={[<button onClick={jest.fn()}>My amazing button</button>]}
+          buttons={[<button onClick={vi.fn()}>My amazing button</button>]}
         />
       </div>,
     );
@@ -52,7 +52,7 @@ describe("Without close button", () => {
           defaultCallback={defaultCallback}
           heading="My modal heading"
           text={[{ content: "Paragraph1", type: "paragraph" }]}
-          buttons={[<button onClick={jest.fn()}>My amazing button</button>]}
+          buttons={[<button onClick={vi.fn()}>My amazing button</button>]}
         />
       </div>,
     );

src/components/ProjectBar/ProjectBar.test.jsx

@@ -6,12 +6,12 @@ import { MemoryRouter } from "react-router-dom";
 import ProjectBar from "./ProjectBar";
 import useIsOnline from "../../hooks/useIsOnline";
 
-jest.mock("axios");
-jest.mock("../../hooks/useIsOnline");
+vi.mock("axios");
+vi.mock("../../hooks/useIsOnline");
 
-jest.mock("react-router-dom", () => ({
-  ...jest.requireActual("react-router-dom"),
-  useNavigate: () => jest.fn(),
+vi.mock("react-router-dom", async () => ({
+  ...(await vi.importActual("react-router-dom")),
+  useNavigate: () => vi.fn(),
 }));
 
 const project = {