Migrate test suite from Jest to Vitest

.github/CONTRIBUTING.md

@@ -108,7 +108,7 @@ yarn dev
 
 ### Test
 
-Runs jest on all projects
+Runs Vitest on all projects
 
 ```
 yarn test
@@ -146,7 +146,7 @@ yarn dev
 
 ### Unit testing
 
-This will run `Jest` unit tests
+This will run `Vitest` unit tests
 
 ```
 yarn test

package.json

@@ -13,7 +13,6 @@
     "@hookform/resolvers": "^3.1.1",
     "@playwright/test": "^1.34.3",
     "@types/benchmark": "^2.1.2",
-    "@types/jest": "^25.0.0",
     "benchmark": "^2.1.4",
     "esm": "^3.2.25",
     "husky": "^4.3.0",

packages/formik-native/package.json

@@ -25,7 +25,8 @@
   "scripts": {
     "start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean",
     "build": "tsdx build --tsconfig tsconfig.build.json",
-    "test": "tsdx test",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "lint": "tsdx lint"
   },
   "peerDependencies": {
@@ -41,6 +42,7 @@
     "react": "^18.2.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
     "tsdx": "^0.14.1",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "vitest": "^1.0.4"
   }
 }

packages/formik-native/vitest.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+  },
+});

packages/formik/package.json

@@ -41,8 +41,10 @@
   },
   "sideEffects": false,
   "scripts": {
-    "test": "tsdx test --env=jsdom",
-    "test:watch": "npm run test -- --watchAll",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
     "start": "tsdx watch --tsconfig tsconfig.build.json --verbose --noClean",
     "build": "tsdx build --tsconfig tsconfig.build.json",
     "lint": "tsdx lint"
@@ -58,27 +60,21 @@
     "tslib": "^2.0.0"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.0.0",
     "@types/lodash": "^4.14.119",
     "@types/react": "^18.2.7",
     "@types/react-dom": "^18.2.4",
     "@types/warning": "^3.0.0",
+    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/ui": "^1.0.4",
+    "jsdom": "^23.0.1",
     "just-debounce-it": "^1.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsdx": "^0.14.1",
     "typescript": "^4.0.3",
+    "vitest": "^1.0.4",
     "yup": "^0.32.0"
-  },
-  "jest": {
-    "globals": {
-      "__DEV__": "boolean"
-    },
-    "collectCoverageFrom": [
-      "src/**/*.{ts,tsx}"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/test/setupTests.ts"
-    ]
   }
 }

packages/formik/test/ErrorMessage.test.tsx

@@ -16,7 +16,7 @@ const TestForm: React.FC<any> = p => (
   />
 );
 
-fdescribe('<ErrorMessage />', () => {
+describe('<ErrorMessage />', () => {
   it('renders with children as a function', async () => {
     let actual: any; /** ErrorMessage ;) */
     let actualFProps: any;

packages/formik/test/Field.test.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { vi } from 'vitest';
 import {
   act,
   cleanup,
@@ -255,7 +256,7 @@ describe('Field / FastField', () => {
     });
 
     cases('assigns innerRef as a ref to string components', renderField => {
-      const innerRef = jest.fn();
+      const innerRef = vi.fn();
       const { container } = renderField({
         innerRef,
         component: 'input',
@@ -268,7 +269,7 @@ describe('Field / FastField', () => {
       let injected: any; /** FieldProps ;) */
       const Component = (props: FieldProps) => (injected = props) && null;
 
-      const innerRef = jest.fn();
+      const innerRef = vi.fn();
       renderField({ component: Component, innerRef });
       expect(injected.innerRef).toBe(innerRef);
     });
@@ -284,7 +285,7 @@ describe('Field / FastField', () => {
     });
 
     cases('assigns innerRef as a ref to string components', renderField => {
-      const innerRef = jest.fn();
+      const innerRef = vi.fn();
       const { container } = renderField({
         innerRef,
         as: 'input',
@@ -298,15 +299,15 @@ describe('Field / FastField', () => {
       const Component = (props: FieldProps['field']) =>
         (injected = props) && null;
 
-      const innerRef = jest.fn();
+      const innerRef = vi.fn();
       renderField({ as: Component, innerRef });
       expect(injected.innerRef).toBe(innerRef);
     });
   });
 
   describe('validate', () => {
     cases('calls validate during onChange if present', async renderField => {
-      const validate = jest.fn();
+      const validate = vi.fn();
       const { getByTestId, rerender } = renderField({
         validate,
         component: 'input',
@@ -325,7 +326,7 @@ describe('Field / FastField', () => {
     cases(
       'does NOT call validate during onChange if validateOnChange is set to false',
       async renderField => {
-        const validate = jest.fn();
+        const validate = vi.fn();
         const { getByTestId, rerender } = renderField(
           { validate, component: 'input' },
           { validateOnChange: false }
@@ -342,7 +343,7 @@ describe('Field / FastField', () => {
     );
 
     cases('calls validate during onBlur if present', async renderField => {
-      const validate = jest.fn();
+      const validate = vi.fn();
       const { getByTestId, rerender } = renderField({
         validate,
         component: 'input',
@@ -360,7 +361,7 @@ describe('Field / FastField', () => {
     cases(
       'does NOT call validate during onBlur if validateOnBlur is set to false',
       async renderField => {
-        const validate = jest.fn();
+        const validate = vi.fn();
         const { getByTestId, rerender } = renderField(
           { validate, component: 'input' },
           { validateOnBlur: false }
@@ -379,7 +380,7 @@ describe('Field / FastField', () => {
     cases(
       'runs validation when validateField is called (SYNC)',
       async renderField => {
-        const validate = jest.fn(() => 'Error!');
+        const validate = vi.fn(() => 'Error!');
         const { getFormProps, rerender } = renderField({
           validate,
           component: 'input',
@@ -401,7 +402,7 @@ describe('Field / FastField', () => {
     cases(
       'runs validation when validateField is called (ASYNC)',
       async renderField => {
-        const validate = jest.fn(() => Promise.resolve('Error!'));
+        const validate = vi.fn(() => Promise.resolve('Error!'));
 
         const { getFormProps, rerender } = renderField({ validate });
 
@@ -473,27 +474,27 @@ describe('Field / FastField', () => {
 
   describe('warnings', () => {
     cases('warns about render prop deprecation', renderField => {
-      global.console.warn = jest.fn();
+      global.console.warn = vi.fn();
       const { rerender } = renderField({
         render: () => null,
       });
       rerender();
-      expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+      expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
         'deprecated'
       );
     });
 
     cases(
       'warns if both string component and children as a function',
       renderField => {
-        global.console.warn = jest.fn();
+        global.console.warn = vi.fn();
 
         const { rerender } = renderField({
           component: 'select',
           children: () => <option value="Jared">{TEXT}</option>,
         });
         rerender();
-        expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+        expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
           'Warning:'
         );
       }
@@ -502,14 +503,14 @@ describe('Field / FastField', () => {
     cases(
       'warns if both string as prop and children as a function',
       renderField => {
-        global.console.warn = jest.fn();
+        global.console.warn = vi.fn();
 
         const { rerender } = renderField({
           as: 'select',
           children: () => <option value="Jared">{TEXT}</option>,
         });
         rerender();
-        expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+        expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
           'Warning:'
         );
       }
@@ -518,54 +519,54 @@ describe('Field / FastField', () => {
     cases(
       'warns if both non-string component and children children as a function',
       renderField => {
-        global.console.warn = jest.fn();
+        global.console.warn = vi.fn();
 
         const { rerender } = renderField({
           component: () => null,
           children: () => <option value="Jared">{TEXT}</option>,
         });
         rerender();
-        expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+        expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
           'Warning:'
         );
       }
     );
 
     cases('warns if both string component and render', renderField => {
-      global.console.warn = jest.fn();
+      global.console.warn = vi.fn();
 
       const { rerender } = renderField({
         component: 'textarea',
         render: () => <option value="Jared">{TEXT}</option>,
       });
       rerender();
-      expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+      expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
         'Warning:'
       );
     });
 
     cases('warns if both non-string component and render', renderField => {
-      global.console.warn = jest.fn();
+      global.console.warn = vi.fn();
 
       const { rerender } = renderField({
         component: () => null,
         render: () => <option value="Jared">{TEXT}</option>,
       });
       rerender();
-      expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+      expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
         'Warning:'
       );
     });
 
     cases('warns if both children and render', renderField => {
-      global.console.warn = jest.fn();
+      global.console.warn = vi.fn();
 
       const { rerender } = renderField({
         children: <div>{TEXT}</div>,
         render: () => <div>{TEXT}</div>,
       });
       rerender();
-      expect((global.console.warn as jest.Mock).mock.calls[0][0]).toContain(
+      expect((global.console.warn as vi.Mock).mock.calls[0][0]).toContain(
         'Warning:'
       );
     });