Migrating `vitest` to SDK #1672

infomiho · 2024-01-24T15:16:00Z

You can try out the feature by running cabal run wasp-cli test client.

infomiho · 2024-01-24T15:20:20Z

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'


I've updated the vitest and all the accompanying libraries to the latest versions. I did this because there was an error with using jsx files from deps (in our case our SDK) which would mean we would need to bundle our SDK for vitest to work again.

Running with the latest versions seems to work fine 👍

waspc/data/Generator/templates/sdk/test/vitest/setup.ts

infomiho · 2024-01-24T15:22:09Z

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

@@ -20,7 +20,8 @@
    "esModuleInterop": true,
    "moduleResolution": "node",
    "outDir": "dist",
-    "allowJs": true
+    "allowJs": true,
+    "types": ["@testing-library/jest-dom"],


There were type errors related to the unit test matchers e.g. toBeInTheDocument was reported as undefined. Since we are copying the ext-src to sdk we also need these types here.

infomiho · 2024-01-24T15:22:34Z

waspc/examples/todo-typescript/.gitignore

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


Vitest creates some cache files in the src dir and it does it in node_modules/.vitest

infomiho · 2024-01-24T15:22:57Z

waspc/examples/todo-typescript/src/MainPage.tsx

@@ -48,36 +49,6 @@ export const MainPage = ({ user }: { user: User }) => {
  )
 }

-function Todo({ id, isDone, description }: Task) {


Extracted this component so I can write a test for it.

waspc/examples/todo-typescript/src/Todo.test.tsx

infomiho · 2024-01-24T15:23:59Z

waspc/examples/todo-typescript/tsconfig.json

@@ -16,11 +16,12 @@
      "esnext"
    ],
    "allowJs": true,
+    "types": ["@testing-library/jest-dom"],


TS complains about toBeInTheDocument and other matchers to be undefined if we don't include this.

This means that the user tsconfig.json needs to include this for the type support to work properly.

Can we do this differently somehow? @sodic

Hmm, how did it work before restructuring?

I know this works, but I remember reading a TS issue recently where people complained about TS not looking for types in directories outside of @types. I'll try to find it and see what they decided.

Edit: It was this one, kind of related.

infomiho · 2024-01-25T15:08:01Z

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -161,17 +158,6 @@ depsRequiredByTailwind spec =
        ]
    else []

-depsRequiredForTesting :: [AS.Dependency.Dependency]


web-app needs to resolve to the deps in the root of the project (that's why we don't include any test deps in the web-app package) so that the setup.ts function can hook into the same object instances from various test libraries. Otherwise, we get an error that e.g. React can't be found.

infomiho · 2024-01-25T15:16:58Z

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

@@ -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


Instead of running from the .wasp/out dir, it now runs from the Wasp project root dir.

waspc/src/Wasp/Generator/Test.hs

sodic · 2024-01-25T17:34:21Z

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

-    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: ["./.wasp/out/web-app/src/test/vitest/setup.ts"],


This file is already templated, so let's use the knowledge we have about this folder instead of hardcoding it.

sodic · 2024-01-25T19:29:08Z

waspc/examples/todo-typescript/tsconfig.json

@@ -16,11 +16,12 @@
      "esnext"
    ],
    "allowJs": true,
+    "types": ["@testing-library/jest-dom"],


Hmm, how did it work before restructuring?

I know this works, but I remember reading a TS issue recently where people complained about TS not looking for types in directories outside of @types. I'll try to find it and see what they decided.

Edit: It was this one, kind of related.

sodic · 2024-01-26T14:21:01Z

waspc/data/Generator/templates/react-app/vite.config.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: {=& vitestSetupFilesArray =},
+    exclude: [...defaultExclude, ".wasp/**/*"]


Same story as with setup files, .wasp is already defined somewhere in Haskell.

Good call, I've now changed the template 👍

sodic

Great! Merging this.

infomiho added 2 commits January 24, 2024 14:07

WIP

c07dba8

Merge branch 'filip-sdk' into miho-vitest-sdk

80bee93

infomiho commented Jan 24, 2024

View reviewed changes

waspc/data/Generator/templates/sdk/test/vitest/setup.ts Outdated Show resolved Hide resolved

infomiho commented Jan 24, 2024

View reviewed changes

waspc/examples/todo-typescript/src/Todo.test.tsx Outdated Show resolved Hide resolved

infomiho commented Jan 24, 2024

View reviewed changes

infomiho added 2 commits January 25, 2024 13:50

Merge branch 'filip-sdk' into miho-vitest-sdk

f0f82ec

Fixes vitest to work with new structure

0d36295

infomiho marked this pull request as ready for review January 25, 2024 14:56

infomiho added 2 commits January 25, 2024 16:00

Merge branch 'filip-sdk' into miho-vitest-sdk

6af28e5

Fixes client tests

5eb6e53

infomiho commented Jan 25, 2024

View reviewed changes

Cleanup

e2efa42

infomiho commented Jan 25, 2024

View reviewed changes

sodic reviewed Jan 25, 2024

View reviewed changes

Adds missing deps. Templating setup file path.

dc83123

sodic reviewed Jan 26, 2024

View reviewed changes

infomiho added 2 commits January 26, 2024 17:06

Template exclude pattern for vitest

ba3e9bf

Adds comment in tsconfig.json

317eedf

sodic approved these changes Jan 27, 2024

View reviewed changes

sodic merged commit c8370bf into filip-sdk Jan 27, 2024
1 of 4 checks passed

sodic deleted the miho-vitest-sdk branch January 27, 2024 11:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrating `vitest` to SDK #1672

Migrating `vitest` to SDK #1672

infomiho commented Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 25, 2024

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024

infomiho Jan 24, 2024

infomiho Jan 25, 2024

sodic Jan 25, 2024

infomiho Jan 25, 2024 •

edited

Loading

infomiho Jan 25, 2024 •

edited

Loading

sodic Jan 25, 2024

sodic Jan 25, 2024

sodic Jan 26, 2024 •

edited

Loading

infomiho Jan 26, 2024

sodic left a comment

Migrating vitest to SDK #1672

Migrating vitest to SDK #1672

Conversation

infomiho commented Jan 24, 2024 • edited Loading

infomiho Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

infomiho Jan 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

infomiho Jan 25, 2024 • edited Loading

Choose a reason for hiding this comment

infomiho Jan 25, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic Jan 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sodic left a comment

Choose a reason for hiding this comment

Migrating `vitest` to SDK #1672

Migrating `vitest` to SDK #1672

infomiho commented Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 24, 2024 •

edited

Loading

infomiho Jan 25, 2024 •

edited

Loading

infomiho Jan 25, 2024 •

edited

Loading

sodic Jan 26, 2024 •

edited

Loading