refact: jest -> vitest

Author: Miloas

Diff for: .circleci/config.yml

@@ -34,7 +34,7 @@ jobs:
       - attach_workspace:
           at: ~/rxjs-hooks
       - run: yarn lint
-      - run: yarn test
+      - run: yarn coverage
       - run:
           name: report-coverage
           command: npx codecov

Diff for: jest.config.js

@@ -13,7 +13,8 @@
     "build:esm": "rm -rf dist/esm && tsc -p src/tsconfig.json --module es2015 --target es5 --outDir dist/esm",
     "build:cjs": "rm -rf dist/cjs && tsc -p src/tsconfig.json --module commonjs --target es5 --outDir dist/cjs",
     "start": "vite",
-    "test": "NODE_ENV=test jest --no-cache --ci",
+    "test": "vitest run",
+    "coverage": "vitest run --coverage",
     "lint": "yarn lint:eslint && yarn lint:tsc",
     "lint:eslint": "eslint . --ext .ts,.tsx --fix --max-warnings 0",
     "lint:tsc": "tsc -p ./tsconfig.json --noEmit",
@@ -24,36 +25,30 @@
     "url": "[email protected]:LeetCode-OpenSource/rxjs-hooks.git"
   },
   "devDependencies": {
-    "@types/jest": "^27.0.1",
-    "@types/lodash": "^4.14.149",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.0",
     "@types/react-test-renderer": "^18.0.0",
-    "@types/sinon": "^10.0.0",
-    "@types/sinon-chai": "^3.2.3",
     "@types/use-sync-external-store": "^0.0.3",
     "@typescript-eslint/eslint-plugin": "^4.19.0",
     "@typescript-eslint/parser": "^4.19.0",
     "@vitejs/plugin-react": "^2.0.0",
+    "@vitest/coverage-c8": "^0.22.1",
     "browser-resolve": "^2.0.0",
-    "codecov": "^3.6.1",
+    "codecov": "^3.8.2",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-react": "^7.23.1",
-    "happypack": "^5.0.1",
     "husky": "^8.0.1",
-    "jest": "^27.0.4",
     "lint-staged": "^13.0.0",
     "prettier": "^2.0.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-test-renderer": "18.1.0",
     "rxjs": "^7.0.0",
-    "sinon": "^14.0.0",
     "standard": "^17.0.0",
-    "ts-jest": "^27.0.2",
     "typescript": "^4.2.0",
-    "vite": "^3.0.0"
+    "vite": "^3.0.0",
+    "vitest": "^0.22.1"
   },
   "dependencies": {
     "tslib": "^2.1.0",

Diff for: package.json

@@ -2,7 +2,7 @@ import React from 'react'
 import { Observable, of, Observer } from 'rxjs'
 import { map, delay, withLatestFrom, combineLatestWith } from 'rxjs/operators'
 import { create, act } from 'react-test-renderer'
-import * as Sinon from 'sinon'
+import { describe, it, expect, vi } from 'vitest'
 
 import { find } from './find'
 import { useEventCallback } from '../use-event-callback'
@@ -43,7 +43,7 @@ describe('useEventCallback specs', () => {
   })
 
   it('should trigger handle async callback', () => {
-    const timer = Sinon.useFakeTimers()
+    const timer = vi.useFakeTimers()
     const timeToDelay = 200
     const value = 1
     const Fixture = createFixture((event$: Observable<any>) =>
@@ -57,14 +57,14 @@ describe('useEventCallback specs', () => {
     act(() => testRenderer.update(fixtureNode))
     const button = find(testRenderer.root, 'button')
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(fixtureNode))
     expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
-    timer.restore()
+    timer.useRealTimers()
   })
 
   it('should handle the initial value', () => {
-    const timer = Sinon.useFakeTimers()
+    const timer = vi.useFakeTimers()
     const initialValue = 1000
     const value = 1
     const timeToDelay = 200
@@ -82,14 +82,14 @@ describe('useEventCallback specs', () => {
     act(() => testRenderer.update(fixtureNode))
     const button = find(testRenderer.root, 'button')
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(fixtureNode))
     expect(find(testRenderer.root, 'h1').children).toEqual([`${value}`])
-    timer.restore()
+    timer.useRealTimers()
   })
 
   it('should handle the state changed', () => {
-    const timer = Sinon.useFakeTimers()
+    const timer = vi.useFakeTimers()
     const initialValue = 1000
     const value = 1
     const timeToDelay = 200
@@ -117,18 +117,18 @@ describe('useEventCallback specs', () => {
     act(() => testRenderer.update(fixtureNode))
     const button = find(testRenderer.root, 'button')
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(fixtureNode))
     expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue + value}`])
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(fixtureNode))
     expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue + value * 2}`])
-    timer.restore()
+    timer.useRealTimers()
   })
 
   it('should handle the inputs changed', () => {
-    const timer = Sinon.useFakeTimers()
+    const timer = vi.useFakeTimers()
     const initialValue = 1000
     const value = 1
     const timeToDelay = 200
@@ -160,20 +160,20 @@ describe('useEventCallback specs', () => {
     act(() => testRenderer.update(fixtureNode))
     const button = find(testRenderer.root, 'button')
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(fixtureNode))
     expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 1}`])
     act(() => testRenderer.update(<Fixture count={4} />))
     button.props.onClick()
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     act(() => testRenderer.update(<Fixture count={4} />))
-    timer.tick(timeToDelay)
+    timer.advanceTimersByTime(timeToDelay)
     expect(find(testRenderer.root, 'h1').children).toEqual([`${value + 4}`])
-    timer.restore()
+    timer.useRealTimers()
   })
 
   it('should call teardown logic after unmount', () => {
-    const spy = Sinon.spy()
+    const spy = vi.fn()
     const Fixture = createFixture(
       () =>
         new Observable((observer: Observer<number>) => {
@@ -192,6 +192,6 @@ describe('useEventCallback specs', () => {
     act(() => {
       testRenderer.unmount()
     })
-    expect(spy.callCount).toBe(1)
+    expect(spy).toHaveBeenCalledOnce()
   })
 })

Diff for: src/__test__/use-event-callback.spec.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
 import { create, act } from 'react-test-renderer'
-import * as Sinon from 'sinon'
 import { of, Observable, Observer, Subject } from 'rxjs'
 
 import { find } from './find'
 import { useObservable } from '../use-observable'
 import { tap, withLatestFrom, map } from 'rxjs/operators'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 
 describe('useObservable specs', () => {
-  let fakeTimer: Sinon.SinonFakeTimers
 
   beforeEach(() => {
-    fakeTimer = Sinon.useFakeTimers()
+    vi.useFakeTimers()
   })
 
   afterEach(() => {
-    fakeTimer.restore()
+    vi.useRealTimers()
   })
 
   it('should get value from sync Observable', () => {
@@ -50,7 +49,7 @@ describe('useObservable specs', () => {
   })
 
   it('should call teardown logic after unmount', () => {
-    const spy = Sinon.spy()
+    const spy = vi.fn()
     function Fixture() {
       const value = useObservable(
         () =>
@@ -70,15 +69,15 @@ describe('useObservable specs', () => {
     const fixtureNode = <Fixture />
 
     const testRenderer = create(fixtureNode)
-    expect(spy.callCount).toBe(0)
+    expect(spy).toHaveBeenCalledTimes(0)
     act(() => {
       testRenderer.unmount()
     })
-    expect(spy.callCount).toBe(1)
+    expect(spy).toHaveBeenCalledOnce()
   })
 
   it('should emit changed states in observableFactory', () => {
-    const spy = Sinon.spy()
+    const spy = vi.fn()
     const initialValue = 1000
     const source$ = new Subject<number>()
     function Fixture() {
@@ -102,24 +101,24 @@ describe('useObservable specs', () => {
     }
 
     const testRenderer = create(<Fixture />)
-    expect(spy.callCount).toBe(0)
+    expect(spy).toHaveBeenCalledTimes(0)
     expect(find(testRenderer.root, 'h1').children).toEqual([])
     act(() => testRenderer.update(<Fixture />))
     source$.next(initialValue)
-    expect(spy.callCount).toBe(1)
-    expect(spy.args[0]).toEqual([initialValue])
+    expect(spy).toHaveBeenCalledOnce()
+    expect(spy).toHaveBeenCalledWith(initialValue)
     expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue}`])
 
     act(() => testRenderer.update(<Fixture />))
     const secondValue = 2000
     source$.next(secondValue)
-    expect(spy.callCount).toBe(2)
-    expect(spy.args[1]).toEqual([initialValue + secondValue])
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledWith(initialValue + secondValue)
     expect(find(testRenderer.root, 'h1').children).toEqual([`${initialValue + secondValue}`])
   })
 
   it('should emit changed props in observableFactory', () => {
-    const spy = Sinon.spy()
+    const spy = vi.fn()
     const timeToDelay = 200
     function Fixture(props: { foo: number; bar: string; baz: any }) {
       const value = useObservable(
@@ -144,25 +143,25 @@ describe('useObservable specs', () => {
     }
 
     const testRenderer = create(<Fixture {...props} />)
-    expect(spy.callCount).toBe(0)
+    expect(spy).toHaveBeenCalledTimes(0)
     expect(find(testRenderer.root, 'h1').children).toEqual([])
     expect(find(testRenderer.root, 'div').children).toEqual([])
     const newProps = { ...props, bar: 'new bar' }
     act(() => testRenderer.update(<Fixture {...newProps} />))
     // wait useEffect fired
     // https://reactjs.org/docs/hooks-reference.html#timing-of-effects
-    fakeTimer.tick(timeToDelay)
-    expect(spy.callCount).toBe(1)
-    expect(spy.args[0]).toEqual([[newProps.foo, newProps.baz]])
+    vi.advanceTimersByTime(timeToDelay)
+    expect(spy).toHaveBeenCalledOnce()
+    expect(spy).toHaveBeenCalledWith([newProps.foo, newProps.baz])
     expect(find(testRenderer.root, 'h1').children).toEqual([`${newProps.foo}`])
     expect(find(testRenderer.root, 'div').children).toEqual([`${newProps.baz.foo}`])
 
     const renewProps = { ...props, foo: 1000 }
     act(() => testRenderer.update(<Fixture {...renewProps} />))
-    fakeTimer.tick(timeToDelay)
+    vi.advanceTimersByTime(timeToDelay)
 
-    expect(spy.callCount).toBe(2)
-    expect(spy.args[1]).toEqual([[renewProps.foo, renewProps.baz]])
+    expect(spy).toHaveBeenCalledTimes(2)
+    expect(spy).toHaveBeenCalledWith([renewProps.foo, renewProps.baz])
     expect(find(testRenderer.root, 'h1').children).toEqual([`${renewProps.foo}`])
     expect(find(testRenderer.root, 'div').children).toEqual([`${renewProps.baz.foo}`])
   })

Diff for: src/__test__/use-observable.spec.tsx

@@ -3,4 +3,9 @@ import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   plugins: [react()],
+  test: {
+    coverage: {
+      reporter: ['text', 'json', 'html', 'lcov', 'clover'],
+    },
+  },
 })