refactor: migrate react tests to typescript #16318

florian-lefebvre · 2026-04-15T07:39:26Z

Interesting, we were using src because zod could cause some issues. If that's not the case anymore, I'm glad!

ocavue · 2026-04-14T16:42:07Z

Notice that ._cache won't be published to NPM.

https://docs.npmjs.com/cli/v10/configuring-npm/package-json#files

I put the tsbuildinfo.json under dist/ so that developers can more easily remove the dist/ to clean both the built .d.ts files and the cached index file tsbuildinfo.json.

ocavue · 2026-04-14T17:34:38Z

I edited this line because somehow astro is still using @types/node v18, which doesn't contain 'test' for this field.

cat node_modules/@types/node/package.json | jq '.version' "18.19.130"

We should update @types/node, but that's out of the scope of this PR.

-Original file line number
+Diff line change
@@ -0,0 +1,7 @@
+    {
+      "extends": "../../tsconfig.base.json",
+      "compilerOptions": {
+        "composite": true,
+        "allowJs": true
+      }
+    }

-Original file line number
+Diff line change
@@ Expand Up / @@ -141,7 +141,7 @@ jobs: @@
             run: pnpm run publint
           - name: Type-check test files
-            run: pnpm -C packages/astro run typecheck:tests
+            run: pnpm run typecheck:tests
       test:
         name: 'Test (${{ matrix.TEST_SUITE.name }}): ${{ matrix.os }} (node@${{ matrix.NODE_VERSION }})'
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     // @ts-check
-    const testEntry = 'test/**/*.test.js';
+    const testEntry = 'test/**/*.test.{js,ts}';
     /** @type {import('knip').KnipConfig} */
     export default {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -38,6 +38,7 @@ @@
         "test:e2e": "cd packages/astro && pnpm playwright install firefox && pnpm run test:e2e",
         "test:e2e:match": "cd packages/astro && pnpm playwright install firefox && pnpm run test:e2e:match",
         "test:e2e:hosts": "turbo run test:hosted",
+        "typecheck:tests": "pnpm -r typecheck:tests",
         "benchmark": "astro-benchmark",
         "lint": "biome lint && knip && eslint . --report-unused-disable-directives-severity=warn --concurrency=auto",
         "lint:ci": "knip && pnpm run eslint:ci",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -112,8 +112,8 @@ @@
         "test:e2e:match": "playwright test -g",
         "test:e2e:chrome": "playwright test",
         "test:e2e:firefox": "playwright test --config playwright.firefox.config.js",
-        "test:types": "tsc --project test/types/tsconfig.json",
-        "typecheck:tests": "tsc --project tsconfig.test.json",
+        "test:types": "tsc --build test/types/tsconfig.json",
+        "typecheck:tests": "tsc --build tsconfig.test.json",
         "test:unit": "astro-scripts test \"test/units/**/*.test.ts\" --strip-types --teardown ./test/units/teardown.ts",
         "test:integration": "pnpm run test:integration:js && pnpm run test:integration:ts",
         "test:integration:js": "astro-scripts test \"test/*.test.js\"",
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migrate react tests to typescript #16318

Uh oh!

Diff view

Diff view

There are no files selected for viewing

florian-lefebvre Apr 15, 2026

Uh oh!

ocavue Apr 14, 2026

Uh oh!

Uh oh!

Uh oh!

ocavue Apr 14, 2026

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ -1,9 +1,9 @@
     import { describe, it } from 'node:test';
     import { expectTypeOf } from 'expect-type';
     import type * as z from 'zod/v4';
-    import { type FontProviderSchema, FontFamilySchema } from '../../src/assets/fonts/config.js';
-    import type { FontProvider, FontFamily } from '../../src/assets/fonts/types.js';
-    import type { CacheSchema, RouteRulesSchema } from '../../src/core/cache/config.js';
+    import { type FontProviderSchema, FontFamilySchema } from '../../dist/assets/fonts/config.js';
+    import type { FontProvider, FontFamily } from '../../dist/assets/fonts/types.js';
+    import type { CacheSchema, RouteRulesSchema } from '../../dist/core/cache/config.js';
     import type { CacheProviderConfig, RouteRules } from '../../dist/core/cache/types.js';
     import type { SessionDriverConfigSchema } from '../../dist/core/session/config.js';
     import type { SessionDriverConfig } from '../../dist/core/session/types.js';
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,8 +1,8 @@
     {
       "extends": "../../../../tsconfig.base.json",
       "compilerOptions": {
+        "composite": true,
         "allowJs": true,
-        "emitDeclarationOnly": false,
-        "noEmit": true
+        "emitDeclarationOnly": false
       }
     }

-Original file line number
+Diff line change
@@ Expand Up / @@ -3,11 +3,13 @@ @@
       "include": ["src", "dev-only.d.ts"],
       "exclude": ["dist"],
       "compilerOptions": {
+        "composite": true,
         "rootDir": "./src",
         "allowJs": true,
         "declarationDir": "./dist",
         "outDir": "./dist",
         "jsx": "preserve",
+        "tsBuildInfoFile": "${configDir}/dist/._cache/tsconfig/tsbuildinfo.json",
         "erasableSyntaxOnly": true
       }
     }

-Original file line number
+Diff line change
@@ -1,12 +1,30 @@
     {
       "extends": "../../tsconfig.base.json",
-      "include": ["test/units/**/*.ts"],
+      "include": [
+        "test/units/**/*.ts",
+        "test/test-adapter.js",
+        "test/test-image-service.js",
+        "test/test-plugins.js",
+        "test/test-prerenderer.js",
+        "test/test-remote-image-service.js",
+        "test/test-utils.js",
+        "package.json"
+      ],
       "exclude": ["test/units/_temp-fixtures/**", "test/fixtures/**"],
       "compilerOptions": {
-        "noEmit": true,
+        "types": ["vite/client", "node"],
+        "composite": true,
         "allowJs": true,
         "noUnusedLocals": false,
         "noUnusedParameters": false,
         "rewriteRelativeImportExtensions": true
-      }
+      },
+      "references": [
+        {
+          "path": "./tsconfig.json"
+        },
+        {
+          "path": "../../scripts/tsconfig.json"
+        }
+      ]
     }

-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,8 @@ @@
         "build": "astro-scripts build \"src/**/*.ts\" && tsc",
         "build:ci": "astro-scripts build \"src/**/*.ts\"",
         "dev": "astro-scripts dev \"src/**/*.ts\"",
-        "test": "astro-scripts test \"test/**/*.test.js\""
+        "test": "astro-scripts test \"test/**/*.test.ts\"",
+        "typecheck:tests": "tsc --build tsconfig.test.json"
       },
       "dependencies": {
         "@astrojs/internal-helpers": "workspace:*",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,7 @@ test.describe('React 19 SSR integration', () => { @@
     		const fixture = await loadFixture({
     			root: new URL('./fixtures/react-19-preloads/', import.meta.url),
     		});
-    		await fixture.build();
+    		await fixture.build({});
     		const html = await fixture.readFile('/index.html');
     		const islandPattern = /<astro-island[^>]*>([\s\S]*?)<\/astro-island>/;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,9 +1,14 @@
     import assert from 'node:assert/strict';
     import { after, before, describe, it } from 'node:test';
     import { load as cheerioLoad } from 'cheerio';
-    import { isWindows, loadFixture } from '../../../astro/test/test-utils.js';
+    import {
+    	isWindows,
+    	loadFixture,
+    	type Fixture,
+    	type DevServer,
+    } from '../../../astro/test/test-utils.js';
-    let fixture;
+    let fixture: Fixture;
     describe('React Components', () => {
     	before(async () => {
@@ Expand All / @@ -14,7 +19,7 @@ describe('React Components', () => { @@
     	describe('build', () => {
     		before(async () => {
-    			await fixture.build();
+    			await fixture.build({});
     		});
     		it('Can load React', async () => {
@@ Expand Down Expand Up / @@ -144,8 +149,7 @@ describe('React Components', () => { @@
     	if (isWindows) return;
     	describe('dev', () => {
-    		/** @type {import('../../../astro/test/test-utils.js').Fixture} */
-    		let devServer;
+    		let devServer: DevServer;
     		before(async () => {
     			devServer = await fixture.startDevServer();
@@ Expand All / @@ -156,7 +160,8 @@ describe('React Components', () => { @@
     		});
     		it('scripts proxy correctly', async () => {
-    			const html = await fixture.fetch('/').then((res) => res.text());
+    			const response = await fixture.fetch('/');
+    			const html: string = await response.text();
     			const $ = cheerioLoad(html);
     			for (const script of $('script').toArray()) {
@@ Expand All / @@ -168,9 +173,10 @@ describe('React Components', () => { @@
     		// TODO: move this to separate dev test?
     		it.skip('Throws helpful error message on window SSR', async () => {
-    			const html = await fixture.fetch('/window/index.html');
+    			const response = await fixture.fetch('/window/index.html');
+    			const html: string = await response.text();
     			assert.ok(
-    				(await html.text()).includes(
+    				html.includes(
     					`[/window]
     			The window object is not available during server-side rendering (SSR).
     			Try using \`import.meta.env.SSR\` to write SSR-friendly code.
@@ Expand All / @@ -181,19 +187,26 @@ describe('React Components', () => { @@
     		// In moving over to Vite, the jsx-runtime import is now obscured. TODO: update the method of finding this.
     		it.skip('uses the new JSX transform', async () => {
-    			const html = await fixture.fetch('/index.html');
+    			const response = await fixture.fetch('/index.html');
+    			const html: string = await response.text();
     			// Grab the imports
     			const exp = /import\("(.+?)"\)/g;
-    			let match, componentUrl;
+    			let match, componentUrl: string | undefined;
     			while ((match = exp.exec(html))) {
     				if (match[1].includes('Research.js')) {
     					componentUrl = match[1];
     					break;
     				}
     			}
+    			if (!componentUrl) {
+    				throw new Error('Could not find component URL in HTML');
+    			}
     			const component = await fixture.readFile(componentUrl);
-    			const jsxRuntime = component.imports.filter((i) => i.specifier.includes('jsx-runtime'));
+    			// @ts-expect-error: error TS2339: Property 'imports' does not exist on type 'string'.
+    			const imports = component.imports;
+    			const jsxRuntime = imports.filter((i: any) => i.specifier.includes('jsx-runtime'));
     			// test 1: react/jsx-runtime is used for the component
     			assert.ok(jsxRuntime);
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -20,7 +20,7 @@ export default new Transform({ @@
     					file: event.data.file,
     					line: event.data.line,
     					column: event.data.column,
-    					isSuite: event.data.details.type !== 'test',
+    					isSuite: event.data.details.type === 'suite',
     				});
     				break;
     		}
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ @@
         "noUnusedLocals": true,
         "noUnusedParameters": true,
         "erasableSyntaxOnly": true,
+        "outDir": "${configDir}/node_modules/.cache/tsconfig/out",
         "types": ["node"]
       }
     }

Uh oh!

refactor: migrate react tests to typescript #16318

Uh oh!

refactor: migrate react tests to typescript #16318

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

florian-lefebvre Apr 15, 2026

Choose a reason for hiding this comment

Uh oh!

ocavue Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ocavue Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!