Merge pull request #412 from ClickHouse/migrate-from-jest-to-vitest

Migrate tests from Jest to Vitest

.gitignore

@@ -1,6 +1,7 @@
 build
 dist
 node_modules
+.idea
 storybook-static
 .env
 *.log

package.json

@@ -28,8 +28,8 @@
   },
   "homepage": "https://clickhouse.com",
   "scripts": {
-    "watch": "jest --watch",
-    "test": "jest",
+    "watch": "vitest --watch",
+    "test": "vitest",
     "dev": "vite",
     "generate-tokens": "node build-tokens.js",
     "build": "tsc && vite build",
@@ -77,43 +77,40 @@
     "@storybook/react-vite": "^7.0.18",
     "@storybook/testing-library": "^0.1.0",
     "@storybook/theming": "^7.0.23",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
     "@tokens-studio/sd-transforms": "^0.10.3",
-    "@types/jest": "^29.5.2",
     "@types/lodash-es": "^4.17.7",
-    "@types/react": "^18.2.53",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-syntax-highlighter": "^15.5.7",
+    "@types/react": "^18.3.2",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/react-window": "^1.8.8",
     "@types/sortablejs": "^1.15.2",
-    "@types/styled-components": "^5.1.26",
-    "@typescript-eslint/eslint-plugin": "^5.57.1",
-    "@typescript-eslint/parser": "^5.57.1",
-    "@vitejs/plugin-react": "^4.0.1",
-    "babel-jest": "^29.5.0",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "@vitejs/plugin-react": "^4.2.1",
     "babel-plugin-styled-components": "^2.1.4",
     "chromatic": "^6.18.2",
-    "eslint": "^8.43.0",
-    "eslint-plugin-prefer-arrow-functions": "^3.1.4",
+    "eslint": "^8.57.0",
+    "eslint-plugin-prefer-arrow-functions": "^3.3.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.3.4",
-    "eslint-plugin-storybook": "^0.6.12",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "jsdom": "^24.0.0",
     "prop-types": "^15.8.1",
     "storybook": "^7.0.18",
     "storybook-addon-pseudo-states": "^2.0.1",
-    "styled-components": "^6.0.6",
+    "styled-components": "^6.1.11",
     "stylis": "^4.3.0",
-    "ts-jest": "^29.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.2",
-    "vite": "^4.3.9",
-    "vite-plugin-dts": "^3.5.1",
-    "watch": "^0.13.0"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
+    "vite-plugin-dts": "^3.9.1",
+    "vitest": "^1.6.0",
+    "watch": "^1.0.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

src/components/AutoComplete/AutoComplete.test.tsx

@@ -1,15 +1,14 @@
 import { act, fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { AutoComplete, AutoCompleteProps } from "./AutoComplete";
+import { AutoComplete, AutoCompleteProps } from "@/components";
 import { renderCUI } from "@/utils/test-utils";
 import { selectOptions } from "../Select/selectOptions";
 describe("AutoComplete", () => {
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     }));
   });
   const renderAutocomplete = (props: Omit<AutoCompleteProps, "label" | "children">) => {
@@ -77,7 +76,7 @@ describe("AutoComplete", () => {
   });
 
   it("should close autocomplete when focus is on outside content", () => {
-    const onOpenChange = jest.fn();
+    const onOpenChange = vi.fn();
     const { queryByText, getByPlaceholderText } = renderAutocomplete({
       onOpenChange,
     });
@@ -92,7 +91,7 @@ describe("AutoComplete", () => {
   });
 
   it("should always respect given value in select", () => {
-    const onSelect = jest.fn();
+    const onSelect = vi.fn();
     const { queryByText, getByTestId, getByText } = renderAutocomplete({
       value: "content0",
       onSelect,

src/components/Button/Button.test.tsx

@@ -1,7 +1,6 @@
 import { Button, ButtonProps } from "./Button";
 import { fireEvent } from "@testing-library/react";
 import { renderCUI } from "@/utils/test-utils";
-import "@testing-library/jest-dom";
 
 describe("Button", () => {
   const renderButton = (props: ButtonProps) => renderCUI(<Button {...props} />);

src/components/ButtonGroup/ButtonGroup.test.tsx

@@ -1,7 +1,6 @@
 import { fireEvent } from "@testing-library/react";
-import { ButtonGroup, ButtonGroupProps } from "./ButtonGroup";
+import { ButtonGroup, ButtonGroupProps } from "@/components";
 import { renderCUI } from "@/utils/test-utils";
-import "@testing-library/jest-dom";
 
 describe("ButtonGroup", () => {
   const renderButtonGroup = (props: ButtonGroupProps) =>

src/components/Collapsible/Collapsible.test.tsx

@@ -3,7 +3,7 @@ import { Collapsible } from "./Collapsible";
 import { fireEvent } from "@testing-library/react";
 
 describe("Collapsible", () => {
-  const onOpenChange = jest.fn();
+  const onOpenChange = vi.fn();
   beforeEach(() => {
     onOpenChange.mockReset();
   });

src/components/Container/Container.test.tsx

@@ -1,6 +1,5 @@
 import { Container, ContainerProps } from "./Container";
 import { renderCUI } from "@/utils/test-utils";
-import "@testing-library/jest-dom";
 
 describe("Container", () => {
   const renderContainer = (props: ContainerProps<"div">) =>

src/components/ContextMenu/ContextMenu.test.tsx

@@ -10,11 +10,11 @@ interface Props extends ContextMenuProps {
 
 describe("ContextMenu", () => {
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     }));
     global.DOMRect = class DOMRect {
       bottom = 0;

src/components/Dropdown/Dropdown.test.tsx

@@ -10,11 +10,11 @@ interface Props extends DropdownMenuProps {
 
 describe("Dropdown", () => {
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     }));
   });
   const renderDropdown = ({ disabled, ...props }: Props) =>

src/components/FileTabs/FileTabs.test.tsx

@@ -1,20 +1,19 @@
 import { fireEvent } from "@testing-library/react";
-import "@testing-library/jest-dom";
 
 import { FileTabs, FileTabStatusType } from "./FileTabs";
 import { renderCUI } from "@/utils/test-utils";
 
 const tabs = ["tab1", "tab2", "tab3"];
 describe("FileTabs", () => {
-  const onReorderTab = jest.fn();
-  const onClose = jest.fn();
-  const onSelect = jest.fn();
+  const onReorderTab = vi.fn();
+  const onClose = vi.fn();
+  const onSelect = vi.fn();
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     }));
   });
   beforeEach(() => {

src/components/Grid/Grid.test.tsx

@@ -1,8 +1,7 @@
-import "@testing-library/jest-dom";
-import { CellProps, Grid, GridProps } from "@/components";
-import { renderCUI } from "@/utils/test-utils";
-import { SelectionFocus } from "./types";
-import { ReactNode } from "react";
+import {CellProps, Grid, GridProps} from "@/components";
+import {renderCUI} from "@/utils/test-utils";
+import {SelectionFocus} from "./types";
+import {ReactNode} from "react";
 
 const Cell: CellProps = ({ type, rowIndex, columnIndex, isScrolling, ...props }) => {
   return (
@@ -35,10 +34,10 @@ interface Props
 }
 type AutoSizerModule = typeof import("react-virtualized-auto-sizer");
 
-jest.mock<AutoSizerModule>("react-virtualized-auto-sizer", () => ({
+vi.mock("react-virtualized-auto-sizer", async () => ({
   __esModule: true,
-  ...jest.requireActual<AutoSizerModule>("react-virtualized-auto-sizer"),
-  default: jest.fn().mockImplementation(({ children }) => {
+  ...(await vi.importActual<AutoSizerModule>("react-virtualized-auto-sizer")),
+  default: vi.fn().mockImplementation(({ children }) => {
     return (children as (size: { width: number; height: number }) => ReactNode)({
       width: 600,
       height: 600,
@@ -47,9 +46,9 @@ jest.mock<AutoSizerModule>("react-virtualized-auto-sizer", () => ({
 }));
 
 describe("Grid", () => {
-  const onColumnResizeTestFn = jest.fn();
-  const onFocusChangeTestFn = jest.fn();
-  const getMenuOptions = jest.fn();
+  const onColumnResizeTestFn = vi.fn();
+  const onFocusChangeTestFn = vi.fn();
+  const getMenuOptions = vi.fn();
   const columnWidthTestFn = () => {
     return 100;
   };

src/components/GridContainer/GridContainer.test.tsx

@@ -1,6 +1,5 @@
-import { GridContainer, GridContainerProps } from "./GridContainer";
+import { GridContainer, GridContainerProps } from "@/components";
 import { renderCUI } from "@/utils/test-utils";
-import "@testing-library/jest-dom";
 
 describe("GridContainer", () => {
   const renderContainer = (props: GridContainerProps) =>

src/components/HoverCard/HoverCard.test.tsx

@@ -1,4 +1,3 @@
-import "@testing-library/jest-dom";
 import { HoverCardProps } from "@radix-ui/react-hover-card";
 import { Checkbox, HoverCard } from "@/components";
 import { fireEvent, waitFor } from "@testing-library/react";

src/components/Pagination/Pagination.test.tsx

@@ -3,7 +3,7 @@ import { Pagination, PaginationProps } from "@/components";
 import { fireEvent } from "@testing-library/dom";
 
 describe("Pagination", () => {
-  const onChange = jest.fn();
+  const onChange = vi.fn();
   const renderPagination = (props: PaginationProps) => {
     return renderCUI(<Pagination {...props} />);
   };
@@ -78,7 +78,7 @@ describe("Pagination", () => {
   });
 
   it("should not call onChange when input is less than 1", () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const { getByDisplayValue } = renderPagination({
       currentPage: 1,
       onChange,
@@ -93,7 +93,7 @@ describe("Pagination", () => {
   });
 
   it("should not call onChange when input is greater than totalPages", () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const { getByDisplayValue } = renderPagination({
       currentPage: 99,
       totalPages: 100,
@@ -115,7 +115,7 @@ describe("Pagination", () => {
   });
 
   it("should call onPageSizeChange when pageSize option are selected", () => {
-    const onPageSizeChange = jest.fn();
+    const onPageSizeChange = vi.fn();
     const { getByText } = renderPagination({
       currentPage: 1,
       onChange,
@@ -130,7 +130,7 @@ describe("Pagination", () => {
   });
 
   it("should disable input if the left and right button are disabled", () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const { getByDisplayValue } = renderPagination({
       currentPage: 1,
       totalPages: 1,

src/components/ProgressBar/ProgressBar.test.tsx

@@ -1,4 +1,4 @@
-import { ProgressBar, ProgressBarProps } from "./ProgressBar";
+import { ProgressBar, ProgressBarProps } from "@/components";
 import { fireEvent } from "@testing-library/react";
 import { renderCUI } from "@/utils/test-utils";
 
@@ -29,7 +29,7 @@ describe("Progress bar", () => {
   });
 
   it("should show close Button if dismissable is true", () => {
-    const onCancel = jest.fn();
+    const onCancel = vi.fn();
     const { queryAllByTestId } = renderPopover({
       type: "default",
       progress: 38,

src/components/RadioGroup/RadioGroup.test.tsx

@@ -29,7 +29,7 @@ describe("RadioGroup", () => {
     );
 
   it("should execute action on click", () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { getByLabelText } = renderRadioGroup({
       onValueChange: handleClick,
     });
@@ -41,7 +41,7 @@ describe("RadioGroup", () => {
   });
 
   it("should not execute action on click if the radio is disabled", () => {
-    const handleClick = jest.fn();
+    const handleClick = vi.fn();
     const { getByLabelText } = renderRadioGroup({
       onValueChange: handleClick,
       disabled: true,

src/components/Select/CheckboxMultiSelect.test.tsx

@@ -4,8 +4,7 @@ import {
   queryByText as queryByTestingText,
   screen,
 } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import { CheckboxMultiSelect, CheckboxMultiSelectProps } from "./CheckboxMultiSelect";
+import { CheckboxMultiSelect, CheckboxMultiSelectProps } from "@/components";
 import { ReactNode } from "react";
 import { renderCUI } from "@/utils/test-utils";
 import { selectOptions } from "./selectOptions";
@@ -53,11 +52,11 @@ const renderSelect = (props: Props) => {
 
 describe("CheckboxCheckboxMultiSelect", () => {
   beforeAll(() => {
-    window.HTMLElement.prototype.scrollIntoView = jest.fn();
-    global.ResizeObserver = jest.fn().mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: jest.fn(),
+    window.HTMLElement.prototype.scrollIntoView = vi.fn();
+    global.ResizeObserver = vi.fn().mockImplementation(() => ({
+      observe: vi.fn(),
+      unobserve: vi.fn(),
+      disconnect: vi.fn(),
     }));
   });