Migrate from Jest to Vitest (#86)

* Migrate from Jest to Vitest

* Migrate from Jest to Vitest

* Remove Jest shield

Author: wojtekmaj

.babelrc

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

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-[![npm](https://img.shields.io/npm/v/@wojtekmaj/react-async-button.svg)](https://www.npmjs.com/package/@wojtekmaj/react-async-button) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-async-button.svg) [![CI](https://github.com/wojtekmaj/react-async-button/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-async-button/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/@wojtekmaj/react-async-button.svg)](https://www.npmjs.com/package/@wojtekmaj/react-async-button) ![downloads](https://img.shields.io/npm/dt/@wojtekmaj/react-async-button.svg) [![CI](https://github.com/wojtekmaj/react-async-button/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-async-button/actions)
 
 # React-Async-Button
 

README.md

@@ -11,13 +11,13 @@
     "build-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext",
     "build-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs",
     "clean": "rimraf dist",
-    "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": [
     "react",
@@ -35,28 +35,23 @@
     "prop-types": "^15.6.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/dom": "^8.11.0",
     "@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.4"
+    "typescript": "^4.9.4",
+    "vitest": "^0.29.2"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"

jest.config.json

@@ -1,10 +1,11 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import React, { createRef } from 'react';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import AsyncButton from './index';
 
-jest.useFakeTimers();
+vi.useFakeTimers();
 
 const pendingConfig = {
   children: 'Loading…',
@@ -29,7 +30,7 @@ describe('<AsyncButton /> component', () => {
   let user: ReturnType<typeof userEvent.setup>;
   beforeEach(() => {
     user = userEvent.setup({
-      advanceTimers: jest.advanceTimersByTime,
+      advanceTimers: vi.advanceTimersByTime.bind(vi),
     });
   });
 
@@ -50,7 +51,7 @@ describe('<AsyncButton /> component', () => {
   });
 
   it('calls onClick properly', async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
 
     render(<AsyncButton {...defaultProps} onClick={onClick} />);
 
@@ -92,14 +93,14 @@ describe('<AsyncButton /> component', () => {
     expect(button2).toHaveTextContent('Success!');
 
     act(() => {
-      jest.advanceTimersByTime(1000);
+      vi.advanceTimersByTime(1000);
     });
 
     const button3 = screen.getByRole('button');
     expect(button3).toHaveTextContent('Success!');
 
     act(() => {
-      jest.advanceTimersByTime(1000);
+      vi.advanceTimersByTime(1000);
     });
 
     const button4 = screen.getByRole('button');
@@ -175,14 +176,14 @@ describe('<AsyncButton /> component', () => {
     expect(button3).toHaveTextContent('Success!');
 
     act(() => {
-      jest.advanceTimersByTime(1000);
+      vi.advanceTimersByTime(1000);
     });
 
     const button4 = screen.getByRole('button');
     expect(button4).toHaveTextContent('Success!');
 
     act(() => {
-      jest.advanceTimersByTime(1000);
+      vi.advanceTimersByTime(1000);
     });
 
     const button5 = screen.getByRole('button');

package.json

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

src/AsyncButton.spec.tsx

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