Replace jest with vitest (#155)

package.json

@@ -29,7 +29,7 @@
     "clean:test": "shx rm -rf coverage .nyc_output",
     "clean:npm": "shx rm -rf dist",
     "lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
-    "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest ./src/",
+    "test": "vitest ./src/",
     "check-types": "tsc --project tsconfig.json --noEmit --noUnusedLocals",
     "storybook": "sb dev -p 6006",
     "storybook:build": "sb build -o ./.docs/react-hooks",
@@ -52,46 +52,41 @@
     }
   },
   "devDependencies": {
-    "@jest/globals": "^29.3.1",
     "@mediamonks/eslint-config": "^2.0.6",
     "@mediamonks/eslint-config-react": "^2.1.11",
     "@mediamonks/eslint-config-typescript": "^1.0.8",
     "@mediamonks/eslint-config-typescript-react": "^1.0.10",
     "@mediamonks/prettier-config": "^1.0.1",
     "@playwright/experimental-ct-react": "^1.32.1",
-    "@storybook/addon-essentials": "^7.0.12",
-    "@storybook/addon-interactions": "^7.0.12",
-    "@storybook/addon-links": "^7.0.12",
-    "@storybook/blocks": "^7.0.12",
-    "@storybook/cli": "^7.0.12",
-    "@storybook/react": "^7.0.12",
-    "@storybook/react-vite": "^7.0.12",
-    "@storybook/types": "^7.0.12",
-    "@swc/core": "^1.3.24",
-    "@swc/jest": "^0.2.24",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@storybook/addon-essentials": "^7.0.0",
+    "@storybook/addon-interactions": "^7.0.0",
+    "@storybook/addon-links": "^7.0.0",
+    "@storybook/blocks": "^7.0.0",
+    "@storybook/cli": "^7.0.0",
+    "@storybook/react-vite": "^7.0.0",
+    "@storybook/types": "^7.0.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.2.3",
     "@types/react": "^18.0.25",
+    "@vitejs/plugin-react": "^4.0.0",
     "eslint": "^8.28.0",
     "husky": "^8.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
     "lint-staged": "^13.1.0",
     "npm-run-all": "^4.1.5",
     "plop": "^3.1.1",
     "prettier": "^2.8.0",
     "react": "^18.2.0",
     "shx": "^0.3.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vitest": "^0.31.0"
   },
   "peerDependencies": {
     "react": ">= 17"
   },
   "dependencies": {
     "@psimk/typed-object": "^1.0.4",
     "@types/lodash-es": "^4.17.6",
+    "@vitest/expect": "^0.31.0",
     "lodash-es": "^4.17.21"
   },
   "lint-staged": {

src/_utils/trimEnd/trimEnd.test.ts

@@ -1,4 +1,4 @@
-import { jest } from '@jest/globals';
+import { describe, expect, it, vi } from 'vitest';
 import { trimEnd } from './trimEnd.js';
 
 describe('trimEnd', () => {
@@ -20,7 +20,7 @@ describe('trimEnd', () => {
 
   it('should not end up in a loop when trimming undefined in empty array', async () => {
     const array: Array<unknown> = [];
-    const arraySpy = jest.spyOn(array, 'pop');
+    const arraySpy = vi.spyOn(array, 'pop');
 
     // Try to trimEnd of empty array
     trimEnd(array);

src/components/AutoFill/AutoFill.test.tsx

@@ -1,4 +1,5 @@
 import { render, waitFor } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { AutoFill } from './AutoFill.js';
 
 describe('AutoFill', () => {

src/hocs/ensuredForwardRef/ensuredForwardRef.test.tsx

@@ -1,6 +1,6 @@
-import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
 import { createRef, type MutableRefObject } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { ensuredForwardRef } from './ensuredForwardRef.js';
 
 describe('ensuredForwardRef', () => {
@@ -24,8 +24,8 @@ describe('ensuredForwardRef', () => {
 
     let ref1: HTMLDivElement | null = null;
 
-    const ref1Function = jest.fn((ref: HTMLDivElement | null) => {
-      ref1 = ref;
+    const ref1Function = vi.fn((_ref: HTMLDivElement | null) => {
+      ref1 = _ref;
     });
 
     // First render
@@ -34,7 +34,7 @@ describe('ensuredForwardRef', () => {
 
     let ref2: HTMLDivElement | null = null;
 
-    const ref2Function = jest.fn((ref: HTMLDivElement | null) => {
+    const ref2Function = vi.fn((ref: HTMLDivElement | null) => {
       ref2 = ref;
     });
 
@@ -49,26 +49,24 @@ describe('ensuredForwardRef', () => {
   });
 
   it('should update ref when no ref object/ref function is provided', () => {
-    // eslint-disable-next-line no-underscore-dangle
-    let _ref: MutableRefObject<HTMLDivElement | null> = createRef();
+    let ref1: MutableRefObject<HTMLDivElement | null> = createRef();
 
     const Component = ensuredForwardRef<HTMLDivElement>((_, ref) => {
-      _ref = ref;
+      ref1 = ref;
 
       return <div ref={ref} data-testid="test" />;
     });
 
     const result = render(<Component />);
 
-    expect(_ref.current).toEqual(result.getByTestId('test'));
+    expect(ref1.current).toEqual(result.getByTestId('test'));
   });
 
   it('should not break when passing undefined as a ref', () => {
-    // eslint-disable-next-line no-underscore-dangle
-    let _ref: MutableRefObject<HTMLDivElement | null> = createRef();
+    let ref1: MutableRefObject<HTMLDivElement | null> = createRef();
 
     const Component = ensuredForwardRef<HTMLDivElement>((_, ref) => {
-      _ref = ref;
+      ref1 = ref;
 
       return <div ref={ref} data-testid="test" />;
     });
@@ -77,6 +75,6 @@ describe('ensuredForwardRef', () => {
     // when the ensuredForwardRef is called. So this test doesn't do much.
     const result = render(<Component ref={undefined} />);
 
-    expect(_ref.current).toEqual(result.getByTestId('test'));
+    expect(ref1.current).toEqual(result.getByTestId('test'));
   });
 });

src/hooks/useBeforeMount/useBeforeMount.test.tsx

@@ -1,6 +1,6 @@
-import { jest } from '@jest/globals';
 import { renderHook } from '@testing-library/react';
 import { useEffect, useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { useMount } from '../useMount/useMount.js';
 import { useBeforeMount } from './useBeforeMount.js';
 
@@ -13,17 +13,17 @@ describe('useBeforeMount', () => {
   });
 
   it('should execute a callback on first render', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     renderHook(() => {
       useBeforeMount(spy);
     });
     expect(spy).toBeCalledTimes(1);
   });
 
   it('should execute during synchronous render, before mount', async () => {
-    const beforeMount = jest.fn();
-    const inlineSpy = jest.fn();
-    const mountedSpy = jest.fn();
+    const beforeMount = vi.fn();
+    const inlineSpy = vi.fn();
+    const mountedSpy = vi.fn();
     renderHook(() => {
       useEffect(() => {
         mountedSpy();
@@ -46,7 +46,7 @@ describe('useBeforeMount', () => {
   });
 
   it('should not execute a callback on re-renders', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { rerender } = renderHook(() => {
       useBeforeMount(spy);
     });
@@ -62,7 +62,7 @@ describe('useBeforeMount', () => {
   });
 
   it('should only execute once when setState is called during useMount', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { rerender } = renderHook(() => {
       // eslint-disable-next-line react/hook-use-state
       const [, setState] = useState(false);

src/hooks/useClientSideValue/useClientSideValue.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { useClientSideValue } from './useClientSideValue.js';
 
 describe('useClientSideValue', () => {

src/hooks/useEventListener/useEventListener.test.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable react/no-multi-comp */
-import { jest } from '@jest/globals';
 import { render } from '@testing-library/react';
 import { createRef, useEffect, useState, type ReactElement } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { useEventListener } from './useEventListener.js';
 
 describe('useEventListener', () => {
   it('Should listen to event attached to element from RefObject', () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const ref = createRef<HTMLDivElement>();
 
     function Test(): ReactElement {
@@ -23,7 +23,7 @@ describe('useEventListener', () => {
   });
 
   it('Should listen to event attached to element from state', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     let exposedRef: HTMLDivElement | null = null;
 
     function Test(): ReactElement {

src/hooks/useForceRerender/useForceRerender.test.tsx

@@ -1,5 +1,5 @@
-import { jest } from '@jest/globals';
 import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 import { useForceRerender } from './useForceRerender.js';
 
 describe('useForceRerender', () => {
@@ -16,7 +16,7 @@ describe('useForceRerender', () => {
   });
 
   it('should force a rerender', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const {
       result: { current: forceRerender },
     } = renderHook(() => {

src/hooks/useHasFocus/useHasFocus.test.tsx

@@ -2,6 +2,7 @@
 /* eslint-disable react/no-multi-comp */
 import { act, render } from '@testing-library/react';
 import { useRef, type ReactElement } from 'react';
+import { describe, expect, it } from 'vitest';
 import { useHasFocus } from './useHasFocus.js';
 
 describe('useHasFocus', () => {
@@ -15,7 +16,7 @@ describe('useHasFocus', () => {
 
     const result = render(<TestComponent />);
 
-    expect(result.queryByTestId('focus')).not.toBeInTheDocument();
+    expect(document.contains(result.queryByTestId('focus'))).not.toBeTruthy();
   });
 
   it('should update when element has focus within', () => {
@@ -40,6 +41,6 @@ describe('useHasFocus', () => {
       result.getByTestId('button').focus();
     });
 
-    expect(result.queryByTestId('focus')).toBeInTheDocument();
+    expect(document.contains(result.queryByTestId('focus'))).toBeTruthy();
   });
 });

src/hooks/useIsMounted/useIsMounted.test.tsx

@@ -1,6 +1,6 @@
-import { jest } from '@jest/globals';
 import { renderHook } from '@testing-library/react';
 import { useEffect } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { useUnmount } from '../useUnmount/useUnmount.js';
 import { useIsMounted } from './useIsMounted.js';
 
@@ -24,7 +24,7 @@ describe('useIsMounted', () => {
   });
 
   it('should return false on first useEffect execution, before mounting', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
     const {
       result: { current: isMounted },
@@ -62,7 +62,7 @@ describe('useIsMounted', () => {
   });
 
   it('should be false during cleanup of the unmount', async () => {
-    const duringCleanupSpy = jest.fn();
+    const duringCleanupSpy = vi.fn();
     const { rerender, unmount } = renderHook(() => {
       const isMounted = useIsMounted();
 
@@ -78,7 +78,7 @@ describe('useIsMounted', () => {
   });
 
   it('should be true during cleanup of in between renders', async () => {
-    const duringCleanupSpy = jest.fn();
+    const duringCleanupSpy = vi.fn();
     const { rerender, unmount } = renderHook(() => {
       const isMounted = useIsMounted();
 

src/hooks/useIsMountedState/useIsMountedState.test.tsx

@@ -1,5 +1,5 @@
-import { jest } from '@jest/globals';
 import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 import { useIsMountedState } from './useIsMountedState.js';
 
 describe('useIsMountedState', () => {
@@ -10,7 +10,7 @@ describe('useIsMountedState', () => {
   });
 
   it('should update after rendering', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
 
     const {
       result: { current: isMounted },

src/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { describe, it } from 'vitest';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 
 describe('useIsomorphicLayoutEffect', () => {

src/hooks/useMediaDuration/useMediaDuration.test.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import { act, fireEvent, renderHook } from '@testing-library/react';
 import { useRef } from 'react';
+import { describe, expect, it } from 'vitest';
 import { useMediaDuration } from './useMediaDuration.js';
 
 describe('useMediaDuration', () => {

src/hooks/useMount/useMount.test.tsx

@@ -1,5 +1,5 @@
-import { jest } from '@jest/globals';
 import { renderHook } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
 import { useMount } from './useMount.js';
 
 describe('useMount', () => {
@@ -11,7 +11,7 @@ describe('useMount', () => {
   });
 
   it('should not run on re-renders', async () => {
-    const spy = jest.fn();
+    const spy = vi.fn();
     const { rerender, unmount } = renderHook(useMount, {
       initialProps: () => spy(),
     });

src/hooks/useRefValue/useRefValue.test.tsx

@@ -1,4 +1,5 @@
 import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { useRefValue } from './useRefValue.js';
 
 describe('useRefValue', () => {

src/hooks/useRefs/useRefs.test.tsx

@@ -1,4 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
 import { useRefs } from './useRefs.js';
 import type { MutableRefs } from './useRefs.types.js';