Vitest (#619)

* switch from jest to vitest

* remove all mention of jest

* we stil want DEBUG_PRINT_LIMIT=0

.github/workflows/lintBuildTest.yml

@@ -28,7 +28,7 @@ jobs:
         run: yarn lint
 
       - name: Test
-        run: yarn test
+        run: yarn test:run
 
       - name: Build
         run: yarn build

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "firsttris.vscode-jest-runner",
     "bradlc.vscode-tailwindcss"
   ]
 }

README.md

@@ -6,7 +6,7 @@ Web client to the [Oxide control plane API](https://github.com/oxidecomputer/omi
 
 - [TypeScript](https://www.typescriptlang.org/)
 - [React](https://reactjs.org/) (+ [React Router](https://reactrouter.com/), [React Query](https://react-query.tanstack.com), [React Table](https://react-table.tanstack.com))
-- [Jest](https://jestjs.io/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) + [Mock Service Workers](https://mswjs.io/)
+- [Vitest](https://vitest.dev/) + [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) + [Mock Service Workers](https://mswjs.io/)
 - [Tailwind](https://tailwindcss.com/)
 - [swagger-typescript-api](https://github.com/acacode/swagger-typescript-api) (generates typed API client from Nexus's [OpenAPI spec](app/docs/nexus-openapi.json))
 - [Vite](https://vitejs.dev/)
@@ -116,15 +116,16 @@ Using the script is strongly recommended, but if you really don't want to, make
 
 ### Other useful commands
 
-| Command        | Description                                                                        |
-| -------------- | ---------------------------------------------------------------------------------- |
-| `yarn test`    | Jest tests. Takes Jest flags like `--onlyChanged` or `--watch`                     |
-| `yarn lint`    | ESLint                                                                             |
-| `yarn tsc`     | Check types                                                                        |
-| `yarn ci`      | Lint, tests, and types                                                             |
-| `yarn fmt .`   | Format everything. Rarely necessary thanks to editor integration                   |
-| `yarn gen`     | Generate components, stories, tests, etc                                           |
-| `yarn gen-api` | Generate API client (see [`docs/update-pinned-api.md`](docs/update-pinned-api.md)) |
+| Command         | Description                                                                        |
+| --------------- | ---------------------------------------------------------------------------------- |
+| `yarn test:run` | Vitest tests                                                                       |
+| `yarn test`     | Vitest tests in watch mode                                                         |
+| `yarn lint`     | ESLint                                                                             |
+| `yarn tsc`      | Check types                                                                        |
+| `yarn ci`       | Lint, tests, and types                                                             |
+| `yarn fmt .`    | Format everything. Rarely necessary thanks to editor integration                   |
+| `yarn gen`      | Generate components, stories, tests, etc                                           |
+| `yarn gen-api`  | Generate API client (see [`docs/update-pinned-api.md`](docs/update-pinned-api.md)) |
 
 ## Relevant documents
 

app/routes.spec.tsx

@@ -23,13 +23,13 @@ describe('routeConfig', () => {
     expect(matches[0].pathname).toEqual('/')
     // second/last is the full match
     expect(matches[1]).toMatchInlineSnapshot(`
-      Object {
-        "params": Object {
+      {
+        "params": {
           "*": "abc/def/ghi",
         },
         "pathname": "/abc/def/ghi",
         "pathnameBase": "/",
-        "route": Object {
+        "route": {
           "element": <NotFound />,
           "path": "*",
         },

app/test-utils.tsx

@@ -4,9 +4,23 @@ import { render } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { rest } from 'msw'
 import { setupServer } from 'msw/node'
+import 'whatwg-fetch'
+import '@testing-library/jest-dom'
 
 import { routes } from './routes'
 import { handlers, resetDb } from '@oxide/api-mocks'
+import { afterAll, afterEach, beforeAll } from 'vitest'
+
+import { setLogger } from 'react-query'
+
+// react-query calls console.error whenever a request fails.
+// this is annoying and we don't need it. leave log and warn there
+// just in case they tell us something useful
+setLogger({
+  log: console.log,
+  warn: console.warn,
+  error: () => {},
+})
 
 const server = setupServer(...handlers)
 

app/util/date.spec.ts

@@ -1,16 +1,17 @@
 import { subSeconds, subMinutes, subHours, subDays } from 'date-fns'
 import { timeAgoAbbr } from './date'
+import { vi } from 'vitest'
 
 const baseDate = new Date(2021, 5, 7)
 
 describe('timeAgoAbbr', () => {
   beforeEach(() => {
-    jest.useFakeTimers('modern') // modern will be default in Jest 27
-    jest.setSystemTime(baseDate)
+    vi.useFakeTimers()
+    vi.setSystemTime(baseDate)
   })
 
   afterEach(() => {
-    jest.useRealTimers()
+    vi.useRealTimers()
   })
 
   it('formats times ago', () => {

libs/api/__tests__/safety.spec.ts

@@ -27,8 +27,6 @@ it('@oxide/api-mocks is only referenced in test files', () => {
   const stdOut = execSync('git grep -l "from \'@oxide/api-mocks\'"')
   const files = stdOut.toString().trim().split('\n')
   for (const file of files) {
-    expect(file).toMatch(
-      /__tests__|test-utils|\.spec\.|jest|tsconfig|api-mocks/
-    )
+    expect(file).toMatch(/__tests__|test-utils|\.spec\.|tsconfig|api-mocks/)
   }
 })

libs/util/children.spec.tsx

@@ -28,7 +28,7 @@ describe('flattenChildren', () => {
     )
     const flattened = flattenChildren(children)
     expect(flattened).toMatchInlineSnapshot(`
-      Array [
+      [
         <div>
           <TestA />
           <TestB />
@@ -46,7 +46,7 @@ describe('flattenChildren', () => {
     )
     const flattened = flattenChildren(children)
     expect(flattened).toMatchInlineSnapshot(`
-      Array [
+      [
         <TestA />,
         <TestB />,
       ]
@@ -64,12 +64,12 @@ describe('flattenChildren', () => {
     )
     const flattened = flattenChildren(children)
     expect(flattened).toMatchInlineSnapshot(`
-    Array [
-      <TestA />,
-      <TestB />,
-      "hello",
-    ]
-  `)
+      [
+        <TestA />,
+        <TestB />,
+        "hello",
+      ]
+    `)
   })
 })
 

package.json

@@ -7,8 +7,9 @@
     "start:msw": "MSW=1 vite",
     "build": "vite build",
     "build-for-nexus": "yarn install && API_URL='' vite build",
-    "ci": "yarn tsc && yarn lint && yarn test",
-    "test": "DEBUG_PRINT_LIMIT=0 jest",
+    "ci": "yarn tsc && yarn lint && yarn test:run",
+    "test": "DEBUG_PRINT_LIMIT=0 vitest",
+    "test:run": "DEBUG_PRINT_LIMIT=0 vitest run",
     "lint": "eslint --ext .js,.ts,.tsx,.json .",
     "fmt": "prettier --write",
     "gen": "plop",
@@ -78,7 +79,6 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
     "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^26.0.23",
     "@types/jscodeshift": "^0.11.2",
     "@types/mousetrap": "^1.6.8",
     "@types/node": "^16.11.9",
@@ -102,8 +102,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-storybook": "^0.5.5",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
     "jscodeshift": "^0.13.0",
+    "jsdom": "^19.0.0",
     "msw": "^0.36.3",
     "node-fetch": "^2.6.1",
     "patch-package": "^6.4.7",
@@ -121,6 +121,7 @@
     "typescript": "4.5.5",
     "url-loader": "^3.0.0",
     "vite": "^2.7.10",
+    "vitest": "^0.2.3",
     "webpack": "^5.40.0",
     "whatwg-fetch": "^3.6.2"
   },

tsconfig.json

@@ -30,6 +30,6 @@
     "sourceMap": true,
     "strict": true,
     "target": "es2015",
-    "types": ["node", "jest"]
+    "types": ["node"]
   }
 }

vite.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { resolve } from 'path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
@@ -57,4 +59,8 @@ export default defineConfig(({ mode }) => ({
       },
     },
   },
+  test: {
+    global: true,
+    environment: 'jsdom',
+  },
 }))