Migrate from Jest to Vitest (wojtekmaj#314)

* Migrate from Jest to Vitest

* Remove Jest shield

.github/workflows/ci.yml

@@ -110,4 +110,4 @@ jobs:
           HUSKY: 0
 
       - name: Run tests
-        run: yarn jest
+        run: yarn unit

README.md

@@ -1,4 +1,4 @@
-[![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
+[![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions)
 
 # React-DateTime-Picker
 

package.json

@@ -15,13 +15,13 @@
     "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
     "copy-styles": "node ./copy-styles.mjs",
-    "jest": "jest",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "postinstall": "husky install",
     "prepack": "yarn clean && yarn build",
     "prettier": "prettier --check . --cache",
-    "test": "yarn lint && yarn tsc && yarn prettier && yarn jest",
-    "tsc": "tsc --noEmit"
+    "test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
+    "tsc": "tsc --noEmit",
+    "unit": "vitest run"
   },
   "keywords": [
     "calendar",
@@ -51,27 +51,23 @@
     "react-time-picker": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
-    "@babel/preset-react": "^7.14.0",
-    "@babel/preset-typescript": "^7.18.6",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.0",
-    "@types/jest": "^29.0.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",
     "@typescript-eslint/parser": "^5.44.0",
     "eslint": "^8.26.0",
     "eslint-config-wojtekmaj": "^0.7.1",
     "husky": "^8.0.0",
-    "jest": "^29.0.0",
-    "jest-environment-jsdom": "^29.0.0",
+    "jsdom": "^21.1.0",
     "prettier": "^2.7.0",
     "pretty-quick": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vitest": "^0.29.2",
+    "vitest-canvas-mock": "^0.2.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

src/DateTimeInput.spec.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import React from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
@@ -707,7 +708,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when changed custom input', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date(2017, 8, 30, 22, 17, 0);
 
     const { container } = render(
@@ -724,7 +725,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when changed custom input with year < 100', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date();
     date.setFullYear(19, 8, 30);
     date.setHours(22, 17, 0, 0);
@@ -747,7 +748,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when changed custom input with no year', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date(2017, 8, 30, 22, 17, 0);
 
     const { container } = render(
@@ -766,7 +767,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when cleared custom inputs', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date(2017, 8, 30, 22, 17, 0);
 
     const { container } = render(
@@ -784,7 +785,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when changed native input', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date(2017, 8, 30, 22, 17, 0);
 
     const { container } = render(
@@ -800,7 +801,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when changed native input with year < 100', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date();
     date.setFullYear(19, 8, 20);
     date.setHours(22, 17, 0, 0);
@@ -822,7 +823,7 @@ describe('DateTimeInput', () => {
   });
 
   it('triggers onChange correctly when cleared native input', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
     const date = new Date(2017, 8, 30, 22, 17, 0);
 
     const { container } = render(

src/DateTimeInput/NativeInput.spec.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import React from 'react';
 import { render } from '@testing-library/react';
 

src/DateTimePicker.spec.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { act, fireEvent, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -690,7 +691,7 @@ describe('DateTimePicker', () => {
   it('calls onChange callback when calling internal internal onChange', () => {
     const instance = createRef();
     const nextValue = new Date(2019, 0, 1, 21, 40, 11, 458);
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     render(<DateTimePicker onChange={onChange} value={new Date(2018, 6, 17)} ref={instance} />);
 
@@ -711,7 +712,7 @@ describe('DateTimePicker', () => {
     const ms = 458;
 
     const nextValue = new Date(2019, 0, 1);
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     render(
       <DateTimePicker
@@ -731,7 +732,7 @@ describe('DateTimePicker', () => {
   });
 
   it('clears the value when clicking on a button', () => {
-    const onChange = jest.fn();
+    const onChange = vi.fn();
 
     const { container } = render(<DateTimePicker onChange={onChange} />);
 

src/shared/dateFormatter.spec.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { formatDate } from './dateFormatter';
 
 describe('formatDate', () => {

src/shared/dates.spec.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { convert12to24, convert24to12 } from './dates';
 
 describe('convert12to24', () => {

src/shared/utils.spec.js

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { between } from './utils';
 
 describe('between', () => {

test-utils.js

@@ -1,19 +1,19 @@
-/* eslint-env jest */
+import { vi } from 'vitest';
 
 export function muteConsole() {
-  jest.spyOn(global.console, 'log').mockImplementation(() => {
+  vi.spyOn(global.console, 'log').mockImplementation(() => {
     // Intentionally empty
   });
-  jest.spyOn(global.console, 'error').mockImplementation(() => {
+  vi.spyOn(global.console, 'error').mockImplementation(() => {
     // Intentionally empty
   });
-  jest.spyOn(global.console, 'warn').mockImplementation(() => {
+  vi.spyOn(global.console, 'warn').mockImplementation(() => {
     // Intentionally empty
   });
 }
 
 export function restoreConsole() {
-  global.console.log.mockRestore();
-  global.console.error.mockRestore();
-  global.console.warn.mockRestore();
+  vi.mocked(global.console.log).mockRestore();
+  vi.mocked(global.console.error).mockRestore();
+  vi.mocked(global.console.warn).mockRestore();
 }

vitest.config.ts

@@ -0,0 +1,12 @@
+// eslint-disable-next-line import/no-unresolved
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    deps: {
+      inline: ['vitest-canvas-mock'],
+    },
+    environment: 'jsdom',
+    setupFiles: 'vitest.setup.ts',
+  },
+});

vitest.setup.ts

@@ -0,0 +1,10 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import matchers from '@testing-library/jest-dom/matchers';
+import 'vitest-canvas-mock';
+
+expect.extend(matchers);
+
+afterEach(() => {
+  cleanup();
+});