chore: migrate from Jest to Vitest

Author: christopherthielen

jest.setup.js

@@ -7,8 +7,9 @@
   "jsnext:main": "lib-esm/index.js",
   "module": "lib-esm/index.js",
   "scripts": {
-    "test": "jest",
-    "test:debug": "node --inspect ./node_modules/.bin/jest --runInBand --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
     "test:downstream": "npm run build && test_downstream_projects",
     "start": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --port 8000 --config ./examples/typescript/webpack.config.js --history-api-fallback",
     "clean": "shx rm -rf _bundles lib lib-esm build _doc",
@@ -50,59 +51,34 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^12.0.0",
     "@types/classnames": "^2.3.1",
-    "@types/jest": "^26.0.24",
     "@types/lodash": "^4.14.171",
     "@types/prop-types": "15.7.4",
     "@types/react": "17.0.14",
     "@types/react-dom": "17.0.9",
     "@uirouter/publish-scripts": "^2.6.4",
-    "babel-jest": "^27.0.6",
+    "@vitest/ui": "^4.0.16",
     "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "cross-env": "^7.0.3",
     "husky": "^4.3.6",
-    "jest": "27.0.6",
+    "jsdom": "^27.4.0",
     "prettier": "^2.3.2",
     "pretty-quick": "^3.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
-    "ts-jest": "^27.0.4",
     "ts-loader": "^9.2.3",
-    "ts-node": "^10.1.0",
     "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^4.3.5",
+    "vitest": "^4.0.16",
     "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
-  "jest": {
-    "setupFiles": [
-      "../jest.setup.js"
-    ],
-    "rootDir": "src",
-    "transform": {
-      ".(ts|tsx)": "ts-jest"
-    },
-    "testEnvironment": "jsdom",
-    "moduleFileExtensions": [
-      "js",
-      "json",
-      "ts",
-      "tsx"
-    ],
-    "globals": {
-      "ts-jest": {
-        "tsConfig": "./tsconfig.jest.json"
-      }
-    },
-    "preset": "ts-jest",
-    "restoreMocks": true
-  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"

package.json

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { servicesPlugin, memoryLocationPlugin } from '@uirouter/core';
 
 import { UIRouterReact, StartMethodCalledMoreThanOnceError } from '../index';
@@ -12,8 +13,8 @@ describe('UIRouterReact class', () => {
   });
 
   it('starts the router with start() method', () => {
-    let urlRouterListenSpy = jest.spyOn(router.urlService, 'listen');
-    let urlRouterSyncSpy = jest.spyOn(router.urlService, 'sync');
+    let urlRouterListenSpy = vi.spyOn(router.urlService, 'listen');
+    let urlRouterSyncSpy = vi.spyOn(router.urlService, 'sync');
     router.start();
     expect(urlRouterListenSpy).toHaveBeenCalled();
     expect(urlRouterSyncSpy).toHaveBeenCalled();

src/__tests__/core.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import { TransitionOptions, RawParams, StateOrName, TransitionPromise, memoryLocationPlugin } from '@uirouter/core';
 import { render } from '@testing-library/react';
 import { act } from 'react-dom/test-utils';
@@ -31,7 +32,7 @@ export const makeTestRouter = (states: ReactStateDeclaration[]) => {
 
 // silence console errors that are logged by react-dom or other actors
 export function muteConsoleErrors() {
-  jest.spyOn(console, 'error').mockImplementation(() => undefined);
+  vi.spyOn(console, 'error').mockImplementation(() => undefined);
 }
 
 export function defer<T = any>() {

src/__tests__/util.tsx

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -54,7 +55,7 @@ describe('<UIRouter>', () => {
   it('starts the router', () => {
     const router = new UIRouterReact();
     router.plugin(memoryLocationPlugin);
-    const spy = jest.spyOn(router, 'start');
+    const spy = vi.spyOn(router, 'start');
     render(
       <UIRouter router={router}>
         <UIRouterContext.Consumer>{(router) => <Child router={router} />}</UIRouterContext.Consumer>

src/components/__tests__/UIRouter.test.tsx

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 import { UISref, UIView } from '../../components';
@@ -22,10 +23,6 @@ const states = [
 ];
 
 describe('<UISref>', () => {
-  let mockUseEffect: any;
-  beforeEach(() => (mockUseEffect = jest.spyOn(React, 'useEffect').mockImplementation(React.useLayoutEffect)));
-  afterEach(() => mockUseEffect.mockRestore());
-
   let { router, routerGo, mountInRouter } = makeTestRouter([]);
   beforeEach(() => ({ router, routerGo, mountInRouter } = makeTestRouter(states)));
 
@@ -36,7 +33,7 @@ describe('<UISref>', () => {
       </UISref>
     );
     await routerGo('state');
-    const goSpy = jest.spyOn(router.stateService, 'go');
+    const goSpy = vi.spyOn(router.stateService, 'go');
     const anchor = wrapper.getByTestId('anchor');
     expect(anchor.getAttribute('href').includes('/state2')).toBe(true);
     anchor.click();
@@ -51,8 +48,8 @@ describe('<UISref>', () => {
   it('registers and deregisters active state from parent UISrefActive when mounting/unmounting', async () => {
     await routerGo('state');
 
-    const deregisterFn = jest.fn();
-    const parentUISrefActiveAddStateFn = jest.fn(() => deregisterFn);
+    const deregisterFn = vi.fn();
+    const parentUISrefActiveAddStateFn = vi.fn(() => deregisterFn);
 
     mountInRouter(
       <UISrefActiveContext.Provider value={parentUISrefActiveAddStateFn}>
@@ -66,7 +63,7 @@ describe('<UISref>', () => {
   });
 
   it('triggers a transition to target state', async () => {
-    const goSpy = jest.spyOn(router.stateService, 'go');
+    const goSpy = vi.spyOn(router.stateService, 'go');
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor" />
@@ -81,8 +78,8 @@ describe('<UISref>', () => {
 
   it('calls the child elements onClick function first', async () => {
     const log = [];
-    const goSpy = jest.spyOn(router.stateService, 'go').mockImplementation(() => log.push('go') as any);
-    const onClickSpy = jest.fn(() => log.push('onClick'));
+    const goSpy = vi.spyOn(router.stateService, 'go').mockImplementation(() => log.push('go') as any);
+    const onClickSpy = vi.fn(() => log.push('onClick'));
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor" onClick={onClickSpy}>
@@ -98,8 +95,8 @@ describe('<UISref>', () => {
   });
 
   it('calls the child elements onClick function and honors e.preventDefault()', async () => {
-    const goSpy = jest.spyOn(router.stateService, 'go');
-    const onClickSpy = jest.fn((e) => e.preventDefault());
+    const goSpy = vi.spyOn(router.stateService, 'go');
+    const onClickSpy = vi.fn((e) => e.preventDefault());
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor" onClick={onClickSpy}>
@@ -114,7 +111,7 @@ describe('<UISref>', () => {
   });
 
   it("doesn't trigger a transition when middle-clicked", async () => {
-    const stateServiceGoSpy = jest.spyOn(router.stateService, 'go');
+    const stateServiceGoSpy = vi.spyOn(router.stateService, 'go');
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor">state2</a>
@@ -130,7 +127,7 @@ describe('<UISref>', () => {
   });
 
   it("doesn't trigger a transition when ctrl/meta/shift/alt+clicked", async () => {
-    const stateServiceGoSpy = jest.spyOn(router.stateService, 'go');
+    const stateServiceGoSpy = vi.spyOn(router.stateService, 'go');
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor">state2</a>
@@ -155,7 +152,7 @@ describe('<UISref>', () => {
   });
 
   it("doesn't trigger a transition when the anchor has a 'target' attribute", async () => {
-    const stateServiceGoSpy = jest.spyOn(router.stateService, 'go');
+    const stateServiceGoSpy = vi.spyOn(router.stateService, 'go');
     const rendered = mountInRouter(
       <UISref to="state2">
         <a data-testid="anchor" target="_blank">

src/components/__tests__/UISref.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, waitFor } from '@testing-library/react';
 import * as React from 'react';
 import { makeTestRouter } from '../../__tests__/util';
 import { ReactStateDeclaration } from '../../index';
@@ -14,8 +15,6 @@ const states: ReactStateDeclaration[] = [
 describe('<UISrefActive>', () => {
   let { router, routerGo, mountInRouter } = makeTestRouter([]);
   beforeEach(() => ({ router, routerGo, mountInRouter } = makeTestRouter(states)));
-  beforeEach(() => jest.spyOn(React, 'useEffect').mockImplementation(React.useLayoutEffect));
-  afterEach(() => (React.useEffect as any).mockRestore());
 
   function UISrefActiveTestComponent(props: {
     to?: string;
@@ -55,14 +54,14 @@ describe('<UISrefActive>', () => {
   });
 
   it('registers onSuccess transition hook to listen for state changes', async () => {
-    const onSuccessSpy = jest.spyOn(router.transitionService, 'onSuccess');
+    const onSuccessSpy = vi.spyOn(router.transitionService, 'onSuccess');
     mountInRouter(<UISrefActiveTestComponent />);
     expect(onSuccessSpy).toHaveBeenCalled();
   });
 
   it('deregisters the transition hook when unmounted', async () => {
-    const deregisterSpy = jest.fn();
-    jest.spyOn(router.transitionService, 'onSuccess').mockImplementation(() => deregisterSpy);
+    const deregisterSpy = vi.fn();
+    vi.spyOn(router.transitionService, 'onSuccess').mockImplementation(() => deregisterSpy);
     const Component = () => {
       const [show, setShow] = React.useState(true);
       return (
@@ -78,7 +77,7 @@ describe('<UISrefActive>', () => {
     const rendered = mountInRouter(<Component />);
     expect(deregisterSpy).not.toHaveBeenCalled();
     rendered.getByTestId('btn').click();
-    expect(deregisterSpy).toHaveBeenCalled();
+    await waitFor(() => expect(deregisterSpy).toHaveBeenCalled());
   });
 
   it('works with state parameters', async () => {
@@ -200,15 +199,16 @@ describe('<UISrefActive>', () => {
       );
     };
 
+    await routerGo('parent.child1');
+    const rendered = render(<Comp />);
+
     const classFor = (testid: string) =>
       rendered.getByTestId(testid).getAttribute('class').split(/ +/).sort().join(' ');
 
-    await routerGo('parent.child1');
-    const rendered = render(<Comp />);
     expect(classFor('div')).toBe('active baseclass');
 
     rendered.getByTestId('hidebtn').click();
-    expect(classFor('div')).toBe('baseclass');
+    await waitFor(() => expect(classFor('div')).toBe('baseclass'));
   });
 
   it('checks for exact state match when exact prop is provided', async () => {

src/components/__tests__/UISrefActive.test.tsx

@@ -1,7 +1,7 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import * as React from 'react';
 import { act } from 'react-dom/test-utils';
-// import { mount } from 'enzyme';
 import { Transition } from '@uirouter/core';
 
 import { makeTestRouter, muteConsoleErrors } from '../../__tests__/util';
@@ -206,7 +206,7 @@ describe('<UIView>', () => {
       }
 
       it('calls the uiCanExit function of a Class Component when unmounting', async () => {
-        const uiCanExitSpy = jest.fn();
+        const uiCanExitSpy = vi.fn();
         router.stateRegistry.register({ name: '__state', component: makeSpyComponent(uiCanExitSpy) } as any);
 
         await routerGo('__state');
@@ -219,7 +219,7 @@ describe('<UIView>', () => {
       });
 
       it('calls uiCanExit function of a React.forwardRef() Class Component when unmounting', async () => {
-        const uiCanExitSpy = jest.fn();
+        const uiCanExitSpy = vi.fn();
         const Comp = makeSpyComponent(uiCanExitSpy);
         const ForwardRef = React.forwardRef((props, ref: any) => <Comp {...props} ref={ref} />);
         router.stateRegistry.register({ name: '__state', component: ForwardRef } as ReactStateDeclaration);
@@ -234,7 +234,7 @@ describe('<UIView>', () => {
       });
 
       it('does not transition if uiCanExit function of its State Component returns false', async () => {
-        let uiCanExitSpy = jest.fn().mockImplementation(() => false);
+        let uiCanExitSpy = vi.fn().mockImplementation(() => false);
         router.stateRegistry.register({ name: '__state', component: makeSpyComponent(uiCanExitSpy) } as any);
         await routerGo('__state');
         const rendered = mountInRouter(<UIView />);
@@ -250,8 +250,8 @@ describe('<UIView>', () => {
 
     it('deregisters the UIView when unmounted', () => {
       const Component = (props) => <UIRouter router={router}>{props.show ? <UIView /> : <div />}</UIRouter>;
-      const deregisterSpy = jest.fn();
-      jest.spyOn(router.viewService, 'registerUIView').mockImplementation(() => deregisterSpy);
+      const deregisterSpy = vi.fn();
+      vi.spyOn(router.viewService, 'registerUIView').mockImplementation(() => deregisterSpy);
       const rendered = render(<Component show={true} />);
       rendered.rerender(<Component show={false} />);
       expect(deregisterSpy).toHaveBeenCalled();
@@ -268,8 +268,8 @@ describe('<UIView>', () => {
     });
 
     it('unmounts the State Component when calling stateService.reload(true)', async () => {
-      const componentDidMountSpy = jest.fn();
-      const componentWillUnmountSpy = jest.fn();
+      const componentDidMountSpy = vi.fn();
+      const componentWillUnmountSpy = vi.fn();
       class TestUnmountComponent extends React.Component {
         componentDidMount = componentDidMountSpy;
         componentWillUnmount = componentWillUnmountSpy;