test(e2e): add overlay-type-errors case (#4271)

e2e/cases/server/overlay-type-errors/index.test.ts

@@ -0,0 +1,33 @@
+import { dev, proxyConsole } from '@e2e/helper';
+import { expect, test } from '@playwright/test';
+
+const cwd = __dirname;
+
+test('should display type errors on overlay correctly', async ({ page }) => {
+  const { restore } = proxyConsole();
+
+  const rsbuild = await dev({
+    cwd,
+    page,
+  });
+
+  const errorOverlay = page.locator('rsbuild-error-overlay');
+
+  await expect(errorOverlay.locator('.title')).toHaveText('Build failed');
+
+  // The first span is "<span style="color:#888">TS2322: </span>"
+  const firstSpan = errorOverlay.locator('span').first();
+  expect(await firstSpan.textContent()).toEqual('TS2322: ');
+  expect(await firstSpan.getAttribute('style')).toEqual('color:#888');
+
+  // The first link is "<a class="file-link">/src/index.ts:3:1</a>"
+  const firstLink = errorOverlay.locator('.file-link').first();
+  expect(await firstLink.getAttribute('class')).toEqual('file-link');
+  expect(
+    (await firstLink.textContent())?.endsWith('/src/index.ts:3:1'),
+  ).toBeTruthy();
+
+  await rsbuild.close();
+
+  restore();
+});

e2e/cases/server/overlay-type-errors/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginTypeCheck } from '@rsbuild/plugin-type-check';
+
+export default defineConfig({
+  plugins: [pluginTypeCheck()],
+});

e2e/cases/server/overlay-type-errors/src/index.ts

@@ -0,0 +1,3 @@
+// This is a type error
+let num = 1;
+num = '2';

e2e/cases/server/overlay-type-errors/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src"]
+}

e2e/package.json

@@ -35,6 +35,7 @@
     "@rsbuild/plugin-stylus": "workspace:*",
     "@rsbuild/plugin-svelte": "workspace:*",
     "@rsbuild/plugin-svgr": "workspace:*",
+    "@rsbuild/plugin-type-check": "^1.2.0",
     "@rsbuild/plugin-webpack-swc": "workspace:*",
     "@rsbuild/plugin-vue": "workspace:*",
     "@rsbuild/plugin-vue-jsx": "^1.1.0",