chore: setup testing libraries and tests for App.tsx #55

brettkolodny · 2025-08-05T16:27:17Z

Sets up vitest and adds tests for App.tsx

Fist PR of two for #45

vercel · 2025-08-05T16:27:30Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Project	Deployment	Preview	Comments	Updated (UTC)
playground	✅ Ready	Preview	Comment	Aug 12, 2025 4:10pm

aslilac · 2025-08-05T17:53:50Z

.github/workflows/test.yml

+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 8


we use 9 in dogfood (probably soon to be 10)

aslilac · 2025-08-05T17:58:54Z

vitest.config.ts

+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    // setupFiles: ['./src/test/setup.ts'],


Suggested change

// setupFiles: ['./src/test/setup.ts'],

aslilac · 2025-08-05T18:05:48Z

vitest.config.ts

+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      exclude: [
+        'node_modules/',
+        'src/test/',
+        '**/*.d.ts',
+        '**/*.config.*',
+        'src/vite-env.d.ts'
+      ]
+    },


what are we doing with the coverage information? do we want to upload it somewhere?

Currently nothing, a lot of the initial config was from trying to use AI to help me get something working that I eventually ditched. Sorry for forgetting to remove it from the PR.

aslilac · 2025-08-05T18:08:10Z

vitest.config.ts

+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      "monaco-editor": "./src/__mocks__/monaco-editor.ts"


the docs recommend using test.alias rather than resolve.alias for mocks. I'm not sure that there's any mechanical different, but the separation of concerns does seem kind of nice.

https://vitest.dev/guide/mocking.html#modules

aslilac · 2025-08-05T18:08:41Z

vitest.config.ts

+        'src/vite-env.d.ts'
+      ]
+    },
+    // Mock WebAssembly for tests


aslilac · 2025-08-05T18:11:18Z

package.json

    "postcss": "^8.5.3",
    "tailwindcss": "3",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.30.1",
    "vercel": "^42.3.0",
    "vite": "^6.3.5",
-    "vite-plugin-vercel": "^9.0.7"
+    "vite-plugin-vercel": "^9.0.7",
+    "vitest": "^3.2.4"
  }
 }


Suggested change

}

}

\n

My editor removes trailing new lines, is there a reason to have it?

short answer: yes.

long answer: https://stackoverflow.com/questions/729692/why-should-text-files-end-with-a-newline

I'm having some issues with getting helix not to strip the new line. But this will be fixed once this PR is merged

hmm. the docs claim that insert-final-newline defaults to true, and it doesn't seem like you've had this issue on other files. weird.

aslilac · 2025-08-05T18:20:08Z

.github/workflows/test.yml

+
+    - name: Install dependencies
+      run: pnpm install
+


Suggested change

- name: Install dependencies

run: pnpm biome check

tho eslint is also in here I guess? do we need both or can we get rid of eslint?

I'm not using eslint in this. I want to do another PR where I set up knip and clean up the dev dependencies

This is said issues and I think I'll make it a fast follow to this PR. Even including the lint check in the PR is going to bloat the diff

aslilac · 2025-08-05T18:24:01Z

src/client/App.test.tsx

+import { ThemeProvider } from "@/client/contexts/theme";
+import attachGPUExample from "@/examples/code/attach-gpu.tf?raw";
+import defaultExample from "@/examples/code/default.tf?raw";
+import { initWasm } from "@/utils/wasm";


does this actually work? you're importing it before the mock is set up (I always avoid mocks because this sort of thing is so confusing to me)

Yeah because vitest moves all mocks to the top of the file

aslilac · 2025-08-05T18:28:33Z

src/client/App.test.tsx

+	it("should not show the loading modal after the wasm has been loaded", async () => {
+		render(<TestApp />);
+
+		await waitFor(async () => {
+			expect(initWasm).toHaveBeenCalled();
+		});
+
+		expect(screen.queryByTestId("wasm-loading-modal")).toBeNull();
+		expect(screen.queryByTestId("wasm-error-modal")).toBeNull();
+	});


I would have more confidence in this test if it was merged with "should show the loading modal while the wasm module is loading"

this is all kind of one behavior. it should show when it's loading, and shouldn't when it's not. seeing that it does in fact go away after being shown is the characteristic we'd really like to see here, but all this checks is that it's not their now. it might've never been, the test never asserts that.

aslilac · 2025-08-05T18:32:01Z

vitest.config.ts

@@ -0,0 +1,39 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'


looks like this file is formatted differently from our usual "double quotes with semicolons"

aslilac · 2025-08-12T15:38:42Z

package.json

+    "vite-plugin-vercel": "^9.0.7",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.14.0"


we should get corepack use pnpm@10.14.0 to insert the hash here

aslilac · 2025-08-12T15:41:05Z

.github/workflows/test.yml

+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
+      with:
+        version: 10.14.0


and speaking of corepack, I wonder if we should just lean on it here. at the very least, the docs for this action say that it'll infer version from package.json and we should lean on that. https://github.com/pnpm/action-setup?tab=readme-ov-file#version

aslilac · 2025-08-12T15:47:49Z

vitest.config.ts

+export default defineConfig({
+	plugins: [react()],
+	test: {
+		globals: true,


you're using imports, not globals. can we remove this?

Suggested change

globals: true,

aslilac · 2025-08-12T15:54:11Z

vitest.config.ts

+	test: {
+		globals: true,
+		environment: "happy-dom",
+		css: true,


is this one necessary? config files tend to bloat over time, so I'd love to keep it as lean as we can to begin with.

brettkolodny added 3 commits August 5, 2025 16:25

chore: add testing deps

f5f6dc4

chore: add testing config and monaco editor mock

e868174

chore: add testing for App.tsx

55ffa4b

chore: setup testing workflow

0df661a

vercel bot deployed to Preview August 5, 2025 16:29 View deployment

brettkolodny marked this pull request as ready for review August 5, 2025 16:30

brettkolodny mentioned this pull request Aug 5, 2025

chore: add initial tests to repo #52

Draft

aslilac reviewed Aug 5, 2025

View reviewed changes

brettkolodny added 5 commits August 11, 2025 19:23

chore: remove uneeded vitest config settings

b9cd244

chore: update pnpm setup version

479f584

chore: remove unused coverage config

14b1d44

chore: add lint step to test workflow

c606ce4

chore: merge wasm loading state tests

411a789

vercel bot deployed to Preview August 11, 2025 19:33 View deployment

chore: remove lint check from this PR

25f24f6

vercel bot deployed to Preview August 11, 2025 19:35 View deployment

chore: bump pnpm version in workflow

dde7125

vercel bot deployed to Preview August 11, 2025 19:36 View deployment

chore: change pnpm version to match package.json

74d1f4c

vercel bot deployed to Preview August 11, 2025 19:38 View deployment

brettkolodny requested a review from aslilac August 11, 2025 19:40

chore: use correct pnpm version

f5c526b

vercel bot deployed to Preview August 11, 2025 20:37 View deployment

chore: use correct pnpm version

0337064

vercel bot deployed to Preview August 11, 2025 20:39 View deployment

chore: use matching pnpm version in workflow

9c2bbbf

vercel bot deployed to Preview August 11, 2025 20:40 View deployment

aslilac approved these changes Aug 12, 2025

View reviewed changes

chore: use pnpm version with hash

2a61cc3

brettkolodny added 3 commits August 12, 2025 15:59

chore: remove globals from vitest config

3b8f935

chore: remove css from vitest config

c9a4075

chore: remove pnpm version from workflow so it infers from package.json

2401b0e

vercel bot deployed to Preview August 12, 2025 16:03 View deployment

chore: rename workflow

97057a7

brettkolodny merged commit 4b0809e into main Aug 12, 2025
2 of 3 checks passed

brettkolodny deleted the brett/add-testing-libraries branch August 12, 2025 16:05

vercel bot deployed to Preview August 12, 2025 16:10 View deployment

		@@ -0,0 +1,39 @@
		/// <reference types="vitest" />
		import { defineConfig } from 'vite'

chore: setup testing libraries and tests for App.tsx #55

chore: setup testing libraries and tests for App.tsx #55

Uh oh!

Conversation

brettkolodny commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Aug 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

brettkolodny commented Aug 5, 2025 •

edited

Loading

vercel bot commented Aug 5, 2025 •

edited

Loading