migrate from jest to vitest

mswjs · Nov 28, 2023 · c0ae528 · c0ae528
1 parent fd0635a
commit c0ae528
Show file tree

Hide file tree

Showing 9 changed files with 578 additions and 547 deletions.
diff --git a/.github/workflows/demo-tests.yml b/.github/workflows/demo-tests.yml
@@ -1,7 +1,7 @@
 name: 'Tests for Demos'
 on: push
 jobs:
-  jest:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -10,4 +10,4 @@ jobs:
       - name: Build addon
         run: yarn workspace msw-storybook-addon build
       - name: Test Demos
-        run: yarn workspace msw-storybook-docs test --colors
+        run: yarn workspace msw-storybook-docs test
diff --git a/packages/docs/jest.config.js b/packages/docs/jest.config.js
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "test": "jest",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "msw:update": "msw init public"
@@ -43,20 +44,20 @@
     "@storybook/addon-mdx-gfm": "^7.6.0",
     "@storybook/react": "^7.6.0",
     "@storybook/react-vite": "^7.6.0",
-    "@storybook/testing-library": "^0.0.13",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@vitejs/plugin-react": "^3.1.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@vitejs/plugin-react": "^3.1.0",
     "chromatic": "^7.5.0",
+    "jsdom": "^23.0.0",
     "msw": "^2.0.9",
     "msw-storybook-addon": "link:../msw-addon",
+    "storybook": "^7.6.0",
     "typescript": "^5.3.2",
     "vite": "^4.1.0",
-    "storybook": "^7.6.0",
-    "undici": "^5.28.1"
+    "vitest": "^0.29.2"
   },
   "msw": {
     "workerDirectory": "public"

diff --git a/packages/docs/src/demos/apollo/App.test.jsx b/packages/docs/src/demos/apollo/App.test.jsx
@@ -1,13 +1,29 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { vi } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'
 
 const { MockedSuccess, MockedError } = composeStories(stories)
 const server = getServer()
 
+
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
+it('renders error message if it cannot load the films', async () => {
+  server.use(...MockedError.parameters.msw.handlers)
+  render(<MockedError />)
+
+  const errorMsgNode = await screen.findByText(
+    /could not fetch star wars data/i
+  )
+  expect(errorMsgNode).toBeInTheDocument()
+})
+
 it('renders film cards for each film', async () => {
   server.use(...MockedSuccess.parameters.msw.handlers)
   render(<MockedSuccess />)
@@ -24,13 +40,3 @@ it('renders film cards for each film', async () => {
   expect(headingNodes[1]).toHaveTextContent('Empire Strikes Back')
   expect(headingNodes[2]).toHaveTextContent('Return of the Jedi')
 })
-
-it('renders error message if it cannot load the films', async () => {
-  server.use(...MockedError.parameters.msw.handlers)
-  render(<MockedError />)
-
-  const errorMsgNode = await screen.findByText(
-    /could not fetch star wars data/i
-  )
-  expect(errorMsgNode).toBeInTheDocument()
-})
diff --git a/packages/docs/src/demos/react-query/App.test.jsx b/packages/docs/src/demos/react-query/App.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { vi } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'
@@ -10,7 +11,7 @@ const { MockedSuccess, MockedError } = composeStories(stories)
 const server = getServer()
 
 afterAll(() => {
-  jest.restoreAllMocks()
+  vi.restoreAllMocks()
 })
 
 it('renders film cards for each film', async () => {
@@ -32,7 +33,7 @@ it('renders film cards for each film', async () => {
 
 it('renders error message if it cannot load the films', async () => {
   // get rid of the console.error for this test which adds clutter to the logs
-  jest.spyOn(console, 'error').mockImplementationOnce(() => {})
+  vi.spyOn(console, 'error').mockImplementationOnce(() => {})
 
   server.use(...MockedError.parameters.msw.handlers)
   render(<MockedError />)

diff --git a/packages/docs/src/fetch-polyfill.js b/packages/docs/src/fetch-polyfill.js
diff --git a/packages/docs/src/setupTests.js b/packages/docs/src/setupTests.js
@@ -1,7 +1,7 @@
 import '@testing-library/jest-dom'
 
 // eslint-disable-next-line import/first
-const { startServer } = require('./test-utils')
+import { startServer } from './test-utils'
 
 const server = startServer()
 

diff --git a/packages/docs/vitest.config.ts b/packages/docs/vitest.config.ts
@@ -0,0 +1,18 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config'
+import { mergeConfig } from 'vite'
+
+import viteConfig from './vite.config'
+
+// https://vitejs.dev/config/
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      globals: true,
+      environment: 'jsdom',
+      clearMocks: true,
+      setupFiles: './src/setupTests.js',
+    },
+  })
+)