chore(test): replace Jest by Vitest (#15)

packages/app/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "scripts": {
     "test": "is-ci-cli \"test:coverage\" \"test:watch\"",
-    "test:coverage": "jest --coverage",
-    "test:watch": "jest --watch",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest",
     "clean": "rimraf dist ../../.parcel-cache",
     "prestart": "npm run clean",
     "start": "parcel",
@@ -31,16 +31,17 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@parcel/transformer-inline-string": "^2.8.2",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.4",
     "@types/react": "^18.0.25",
     "@types/react-dom": "^18.0.9",
     "@types/react-test-renderer": "^18.0.0",
+    "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^5.44.0",
     "@typescript-eslint/parser": "^5.44.0",
-    "babel-jest": "^29.3.1",
+    "@vitejs/plugin-react": "^4.0.4",
+    "@vitest/coverage-v8": "^0.34.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.26.0",
@@ -50,14 +51,15 @@
     "eslint-plugin-testing-library": "^5.9.1",
     "identity-obj-proxy": "^3.0.0",
     "is-ci-cli": "^2.2.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
+    "jsdom": "^22.1.0",
     "lint-staged": "^13.1.0",
     "parcel": "^2.8.0",
     "process": "^0.11.10",
     "react-test-renderer": "^18.2.0",
     "rimraf": "^3.0.2",
-    "simple-git-hooks": "^2.8.1"
+    "simple-git-hooks": "^2.8.1",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vitest": "^0.34.1"
   },
   "dependencies": {
     "classnames": "^2.3.2",

packages/app/src/components/app/app.test.tsx

@@ -18,31 +18,31 @@ async function typeValue(value: string) {
 
 function finishTime() {
   act(() => {
-    jest.advanceTimersByTime(ONE_SECOND * 10)
+    vi.advanceTimersByTime(ONE_SECOND * 10)
   })
 }
 
 describe('App', () => {
   beforeAll(() => {
     // Workaround for <dialog> element not supported yet by JestDOM
     // https://github.com/jsdom/jsdom/issues/3294
-    HTMLDialogElement.prototype.show = jest.fn()
-    HTMLDialogElement.prototype.showModal = jest.fn()
-    HTMLDialogElement.prototype.close = jest.fn()
+    HTMLDialogElement.prototype.show = vi.fn()
+    HTMLDialogElement.prototype.showModal = vi.fn()
+    HTMLDialogElement.prototype.close = vi.fn()
   })
 
   beforeEach(() => {
-    jest.useFakeTimers()
-    jest.spyOn(api, 'getWords').mockResolvedValue({
+    vi.useFakeTimers()
+    vi.spyOn(api, 'getWords').mockResolvedValue({
       tata: 'ta',
       tabla: 'bla',
     })
   })
 
   afterEach(() => {
     act(() => {
-      jest.runOnlyPendingTimers()
-      jest.useRealTimers()
+      vi.runOnlyPendingTimers()
+      vi.useRealTimers()
     })
   })
 
@@ -59,7 +59,7 @@ describe('App', () => {
     await typeValue('a')
 
     act(() => {
-      jest.advanceTimersByTime(ONE_SECOND * 2)
+      vi.advanceTimersByTime(ONE_SECOND * 2)
     })
 
     await screen.findByText('8')

packages/app/src/components/form/form.test.tsx

@@ -11,7 +11,7 @@ async function submitWord(word: string) {
 
 describe('Form', () => {
   it('submitting the form calls "onWordSubmit" with the typed word as param', async () => {
-    const onWordSubmit = jest.fn()
+    const onWordSubmit = vi.fn()
     render(<Form onWordSubmit={onWordSubmit} />)
 
     await submitWord('foo')
@@ -20,7 +20,7 @@ describe('Form', () => {
   })
 
   it('changing the input value calls "onChange"', async () => {
-    const onChange = jest.fn()
+    const onChange = vi.fn()
     render(<Form onChange={onChange} />)
 
     await submitWord('foo')

packages/app/src/components/game-end/game-end.test.tsx

@@ -25,8 +25,8 @@ describe('GameEnd', () => {
   })
 
   it('Displays a native share button in supporting clients', async () => {
-    const nativeShare = jest.fn()
-    jest.spyOn(nativeShareModule, 'useNativeShare').mockImplementationOnce(() => ({
+    const nativeShare = vi.fn()
+    vi.spyOn(nativeShareModule, 'useNativeShare').mockImplementationOnce(() => ({
       canUseNativeShare: true,
       share: nativeShare,
     }))
@@ -41,7 +41,7 @@ describe('GameEnd', () => {
   })
 
   it('clicking the "play again" button calls "onPlayClick"', async () => {
-    const onPlayClick = jest.fn()
+    const onPlayClick = vi.fn()
     render(<GameEnd score={5} onPlayClick={onPlayClick} />)
 
     await user.click(screen.getByRole('button', { name: /jugar/i }))

packages/app/src/components/sharer/sharer.test.tsx

@@ -36,7 +36,7 @@ describe('Sharer', () => {
   })
 
   it('whatsapp link has the correct format for desktop', () => {
-    jest.spyOn(util, 'isMobile').mockReturnValue(false)
+    vi.spyOn(util, 'isMobile').mockReturnValue(false)
 
     render(<Sharer url="any" text="encode this text!" />)
 
@@ -47,7 +47,7 @@ describe('Sharer', () => {
   })
 
   it('whatsapp link has the correct format for mobile', () => {
-    jest.spyOn(util, 'isMobile').mockReturnValue(true)
+    vi.spyOn(util, 'isMobile').mockReturnValue(true)
 
     render(<Sharer url="any" text="encode this text!" />)
 

packages/app/src/components/timer/timer.test.tsx

@@ -6,13 +6,13 @@ const ONE_SECOND = 1000
 
 describe('Timer', () => {
   beforeEach(() => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
   })
 
   afterEach(() => {
     act(() => {
-      jest.runOnlyPendingTimers()
-      jest.useRealTimers()
+      vi.runOnlyPendingTimers()
+      vi.useRealTimers()
     })
   })
 
@@ -26,18 +26,18 @@ describe('Timer', () => {
     render(<Timer countStart={10} started />)
 
     act(() => {
-      jest.advanceTimersByTime(ONE_SECOND)
+      vi.advanceTimersByTime(ONE_SECOND)
     })
 
     expect(screen.getByText('9')).toBeInTheDocument()
   })
 
   it('calls onTick after started and on each count down interval', () => {
-    const onTick = jest.fn()
+    const onTick = vi.fn()
     render(<Timer countStart={10} onTick={onTick} started />)
 
     act(() => {
-      jest.advanceTimersByTime(ONE_SECOND * 2)
+      vi.advanceTimersByTime(ONE_SECOND * 2)
     })
 
     expect(onTick).toHaveBeenCalledTimes(2)

packages/app/src/icons/__snapshots__/icons.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Icons <AlarmIcon> renders the expected svg 1`] = `
+exports[`Icons > <AlarmIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -62,7 +62,7 @@ exports[`Icons <AlarmIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <AlertIcon> renders the expected svg 1`] = `
+exports[`Icons > <AlertIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -91,7 +91,7 @@ exports[`Icons <AlertIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <ArrowIcon> renders the expected svg 1`] = `
+exports[`Icons > <ArrowIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -115,7 +115,7 @@ exports[`Icons <ArrowIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <ChainIcon> renders the expected svg 1`] = `
+exports[`Icons > <ChainIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   viewBox="0 0 24 24"
@@ -138,7 +138,7 @@ exports[`Icons <ChainIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <CrossIcon> renders the expected svg 1`] = `
+exports[`Icons > <CrossIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -154,7 +154,7 @@ exports[`Icons <CrossIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <FacebookIcon> renders the expected svg 1`] = `
+exports[`Icons > <FacebookIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   viewBox="0 0 32 32"
@@ -191,7 +191,7 @@ exports[`Icons <FacebookIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <InfoIcon> renders the expected svg 1`] = `
+exports[`Icons > <InfoIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -228,7 +228,7 @@ exports[`Icons <InfoIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <PlayIcon> renders the expected svg 1`] = `
+exports[`Icons > <PlayIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   viewBox="0 0 24 24"
@@ -251,7 +251,7 @@ exports[`Icons <PlayIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <SadIcon> renders the expected svg 1`] = `
+exports[`Icons > <SadIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -288,7 +288,7 @@ exports[`Icons <SadIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <ShareIcon> renders the expected svg 1`] = `
+exports[`Icons > <ShareIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -326,7 +326,7 @@ exports[`Icons <ShareIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <TwitterIcon> renders the expected svg 1`] = `
+exports[`Icons > <TwitterIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   viewBox="0 0 48 48"
@@ -347,7 +347,7 @@ exports[`Icons <TwitterIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <VictoryIcon> renders the expected svg 1`] = `
+exports[`Icons > <VictoryIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   focusable={false}
@@ -383,7 +383,7 @@ exports[`Icons <VictoryIcon> renders the expected svg 1`] = `
 </svg>
 `;
 
-exports[`Icons <WhatsappIcon> renders the expected svg 1`] = `
+exports[`Icons > <WhatsappIcon> renders the expected svg 1`] = `
 <svg
   fill="none"
   viewBox="0 0 32 32"

packages/app/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "types": ["vitest/globals", "@types/testing-library__jest-dom"]
   },
   "include": ["src", "./declaration.d.ts"]
 }

packages/app/vitest.config.ts

@@ -0,0 +1,14 @@
+import react from '@vitejs/plugin-react'
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  css: { postcss: { plugins: [] } },
+  test: {
+    include: ['./src/**/*.test.{ts,tsx}'],
+    setupFiles: ['vitest.setup.ts'],
+    environment: 'jsdom',
+    globals: true,
+  },
+})

packages/app/vitest.setup.ts

@@ -0,0 +1,11 @@
+import matchers from '@testing-library/jest-dom/matchers'
+import { cleanup } from '@testing-library/react'
+import { expect, afterEach } from 'vitest'
+
+// extends Vitest's expect method with methods from react-testing-library
+expect.extend(matchers)
+
+// runs a cleanup after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup()
+})