Migrating vitest to SDK

waspc/cli/src/Wasp/Cli/Command/Test.hs

@@ -15,17 +15,20 @@ import Wasp.Cli.Command.Message (cliSendMessageC)
 import Wasp.Cli.Command.Require (InWaspProject (InWaspProject), require)
 import Wasp.Cli.Command.Watch (watch)
 import qualified Wasp.Generator
-import Wasp.Generator.Common (ProjectRootDir)
 import qualified Wasp.Message as Msg
-import Wasp.Project.Common (dotWaspDirInWaspProjectDir, generatedCodeDirInDotWaspDir)
+import Wasp.Project.Common
+  ( WaspProjectDir,
+    dotWaspDirInWaspProjectDir,
+    generatedCodeDirInDotWaspDir,
+  )
 
 test :: [String] -> Command ()
 test [] = throwError $ CommandError "Not enough arguments" "Expected: wasp test client <args>"
 test ("client" : args) = watchAndTest $ Wasp.Generator.testWebApp args
 test ("server" : _args) = throwError $ CommandError "Invalid arguments" "Server testing not yet implemented."
 test _ = throwError $ CommandError "Invalid arguments" "Expected: wasp test client <args>"
 
-watchAndTest :: (Path' Abs (Dir ProjectRootDir) -> IO (Either String ())) -> Command ()
+watchAndTest :: (Path' Abs (Dir WaspProjectDir) -> IO (Either String ())) -> Command ()
 watchAndTest testRunner = do
   InWaspProject waspRoot <- require
   let outDir = waspRoot </> dotWaspDirInWaspProjectDir </> generatedCodeDirInDotWaspDir
@@ -39,7 +42,7 @@ watchAndTest testRunner = do
   watchOrStartResult <- liftIO $ do
     ongoingCompilationResultMVar <- newMVar (warnings, [])
     let watchWaspProjectSource = watch waspRoot outDir ongoingCompilationResultMVar
-    watchWaspProjectSource `race` testRunner outDir
+    watchWaspProjectSource `race` testRunner waspRoot
 
   case watchOrStartResult of
     Left () -> error "This should never happen, listening for file changes should never end but it did."

waspc/data/Generator/templates/react-app/src/test/vitest/setup.ts

@@ -1,4 +1,8 @@
-import matchers from '@testing-library/jest-dom/matchers'
-import { expect } from 'vitest'
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+import '@testing-library/jest-dom/vitest'
 
-expect.extend(matchers)
+// runs a clean after each test case (e.g. clearing jsdom)
+afterEach(() => {
+  cleanup();
+})

waspc/data/Generator/templates/react-app/tsconfig.json

@@ -6,7 +6,7 @@
     "allowJs": true,
     "strict": false,
     // Allow importing pages with the .tsx extension.
-    "allowImportingTsExtensions": true
+    "allowImportingTsExtensions": true,
   },
   "include": [
     "src"

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -2,6 +2,7 @@
 /// <reference types="vitest" />
 import { mergeConfig } from "vite";
 import react from "@vitejs/plugin-react";
+import { defaultExclude } from "vitest/config"
 
 {=# customViteConfig.isDefined =}
 // Ignoring the TS error because we are importing a file outside of TS root dir.
@@ -29,12 +30,16 @@ const defaultViteConfig = {
     outDir: "build",
   },
   test: {
+    globals: true,
     environment: "jsdom",
-    setupFiles: ["./src/test/vitest/setup.ts"],
+    // vitest is running from the root of the project, so we need
+    // to specify the path to the setup file relative to the root.
+    setupFiles: {=& vitest.setupFilesArray =},
+    exclude: [
+      ...defaultExclude,
+      "{= vitest.excludeWaspArtefactsPattern =}",
+    ]
   },
-  // resolve: {
-  //   dedupe: ["react", "react-dom"],
-  // },
 };
 
 // https://vitejs.dev/config/

waspc/data/Generator/templates/sdk/package.json

@@ -121,6 +121,9 @@
       {=!  Used by users, documented. =}
       "./dbSeed/types": "./dist/dbSeed/types.js",
       {=!  Used by users, documented. =}
+      "./test": "./dist/test/index.js",
+      {=!  Used by our code, uncodumented (but accessible) for users. =}
+      "./test/*": "./dist/test/*.js",
       "./crud/*": "./dist/crud/*.js",
       {=!  Used by our code, uncodumented (but accessible) for users. =}
       "./server/crud/*": "./dist/server/crud/*",

waspc/data/Generator/templates/react-app/src/test/vitest/helpers.tsx → waspc/data/Generator/templates/sdk/test/vitest/helpers.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { render, RenderResult, cleanup } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { beforeAll, afterEach, afterAll } from 'vitest'
-import { Query } from '../../queries'
+import { Query } from 'wasp/rpc'
 import config from 'wasp/core/config'
 import { HttpMethod, Route } from 'wasp/types'
 

waspc/data/Generator/templates/sdk/tsconfig.json

@@ -20,7 +20,13 @@
     "esModuleInterop": true,
     "moduleResolution": "node",
     "outDir": "dist",
-    "allowJs": true
+    "allowJs": true,
+    "types": [
+      // This is needed to properly support Vitest testing with jest-dom matchers.
+      // Types for jest-dom are not recognized automatically and Typescript complains
+      // about missing types e.g. when using `toBeInTheDocument` and other matchers.
+      "@testing-library/jest-dom"
+    ],
     // todo(filip): Only works with common js, see https://www.typescriptlang.org/tsconfig#paths and daily-article.
     // "paths": {
     //   "@wasp/*": [

waspc/examples/todo-typescript/.gitignore

@@ -1,4 +1,4 @@
 /.wasp/
 /.env.server
 /.env.client
-/node_modules/
+node_modules/

waspc/examples/todo-typescript/.wasp/out/sdk/wasp/package.json

@@ -61,6 +61,8 @@
       "./server/queries": "./dist/server/queries/index.js",
       "./server/auth/email": "./dist/server/auth/email/index.js",
       "./dbSeed/types": "./dist/dbSeed/types.js",
+      "./test": "./dist/test/index.js",
+      "./test/*": "./dist/test/*.js",
       "./crud/*": "./dist/crud/*.js",
       "./server/crud/*": "./dist/server/crud/*",
       "./email": "./dist/email/index.js",
@@ -96,7 +98,13 @@
   "@lucia-auth/adapter-prisma": "^4.0.0-beta.9",
   "socket.io": "^4.6.1",
   "socket.io-client": "^4.6.1",
-  "@socket.io/component-emitter": "^4.0.0"
+  "@socket.io/component-emitter": "^4.0.0",
+  "vitest": "^1.2.1",
+  "@vitest/ui": "^1.2.1",
+  "jsdom": "^21.1.1",
+  "@testing-library/react": "^14.1.2",
+  "@testing-library/jest-dom": "^6.3.0",
+  "msw": "^1.1.0"
 },
   "devDependencies": {"@tsconfig/node18": "latest"
 }