working type and e2e tests

package.json

@@ -29,7 +29,7 @@
     "release": "bumpp && npm publish && git push --follow-tags",
     "test:prepare-fixtures": "nuxi prepare test/fixtures/sample-project",
     "test:types-fixtures": "nuxi typecheck test/fixtures/sample-project",
-    "test:fixtures": "vitest run --dir test",
+    "test:fixtures": "vitest run --dir test ",
     "test:types": "pnpm run typecheck",
     "test": "pnpm run test:prepare-fixtures && pnpm run test:types && pnpm run test:fixtures",
     "test:debug": "NUXT_ROUTER_CONFIG_NAME=$CONFIG pnpm run test:types-fixtures"

test/e2e/e2eTests.spec.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+import { setupNuxtE2ETestForConfig } from './setupNuxtE2ETestForConfig';
+import { globby } from 'globby';
+
+describe.sequential('Testing E2E with different configs', async () => {
+  try {
+    const allConfigs = await globby('test/samples-config');
+    for (let config of allConfigs) {
+      const configFileName = path.parse(config).name;
+      await setupNuxtE2ETestForConfig(configFileName);
+    }
+  } catch (e: any) {
+    throw new Error(e);
+  }
+});

test/e2e/sample-project/utils.ts → test/e2e/setupNuxtE2ETestForConfig.ts

@@ -1,27 +1,29 @@
-import { timeout } from '$$/utils';
-import { getBrowser, url, useTestContext } from '@nuxt/test-utils';
+import { getConfigFromName } from '$$/utils';
+import { getBrowser, setup, url, useTestContext, $fetch } from '@nuxt/test-utils';
+import { fileURLToPath } from 'url';
 import { expect } from 'vitest';
-import { $ } from 'zx';
 
-export async function setupNuxtTestWithConfig(configName: string) {
-  try {
-    // await $`NUXT_ROUTER_CONFIG_NAME=${configName} pnpm run test:prepare-fixtures`;
-    // await timeout(500);
-    await $`NUXT_ROUTER_CONFIG_NAME=${configName} pnpm run test:types-fixtures`;
-    await timeout(100);
-  } catch (e) {
-    return Promise.reject(`Typecheck failed for config: [${configName}]: ${e}`);
-  }
-  // it('should render base buttons', async () => {
-  //   const link = `/[${configName}]`;
-  //   const html = await $fetch(link);
+export async function setupNuxtE2ETestForConfig(configName: string, basePath = '') {
+  const testConfig = await import(`../samples-config/${configName}.ts`);
+  await setup({
+    rootDir: fileURLToPath(new URL('../fixtures/sample-project', import.meta.url)),
+    nuxtConfig: getConfigFromName(configName, testConfig),
+  });
+
+  it(
+    `should render base buttons for config [${configName}]`,
+    async () => {
+      const link = `/tests/${basePath}[${configName}]`;
+      const html = await $fetch(link);
 
-  //   expect(html).toContain('Navigate button');
-  //   expect(html).toContain('Navigate link');
-  //   expect(html).toContain('NavigateTo button');
+      expect(html).toContain('Navigate button');
+      expect(html).toContain('Navigate link');
+      expect(html).toContain('NavigateTo button');
 
-  //   await expectNoClientErrors(link);
-  // });
+      await expectNoClientErrors(link);
+    },
+    { sequential: true }
+  );
 }
 
 // Taken from nuxt/framework repo

test/fixtures/sample-project/nuxt.config.ts

@@ -1,32 +1,14 @@
 import type { NuxtConfig } from '@nuxt/schema';
 import TestModuleRoute from './src/modules/testAddRoute';
-import { globbySync } from 'globby';
+import { getConfigFromName } from '../../utils';
 
 const configName = process.env.NUXT_ROUTER_CONFIG_NAME;
 
 let additionalConfig: NuxtConfig | undefined;
 
-console.log({ configName });
-
 if (configName) {
   const config = require(`../../samples-config/${configName}.ts`);
-  const files = globbySync(`test/fixtures/sample-project/tests/[${configName}]`);
-  additionalConfig = {
-    ...config,
-    nuxtTypedRouter: {
-      ...config.nuxtTypedRouter,
-      ignoreRoutes: ['[...404].vue', '[tests]/**/*.vue'],
-    },
-    typescript: {
-      tsConfig: {
-        files: [
-          ...files.map((m) => m.replace('test/fixtures/sample-project', '..')),
-          `../src/pages/[tests]/[${configName}].vue`,
-        ],
-        exclude: ['../tests/**/*', '../src/pages/[tests]/**/*.vue'],
-      },
-    },
-  };
+  additionalConfig = getConfigFromName(configName, config);
 }
 
 export default defineNuxtConfig({

test/fixtures/sample-project/src/pages/[...404].vue

@@ -1,3 +1,3 @@
 <template>
-  <span>Foo</span>
+  <span>404</span>
 </template>

test/fixtures/sample-project/src/pages/[tests]/README.md

@@ -0,0 +1 @@
+Each file will be isolated type wise, so the e2e tests will navigate to the corresponding route

test/unit/setupTypeTest.ts

@@ -0,0 +1,11 @@
+import { timeout } from '$$/utils';
+import { $ } from 'zx';
+
+export async function setupNuxtTestWithConfig(configName: string) {
+  try {
+    await $`NUXT_ROUTER_CONFIG_NAME=${configName} pnpm run test:types-fixtures`;
+    await timeout(100);
+  } catch (e) {
+    return Promise.reject(`Typecheck failed for config: [${configName}]: ${e}`);
+  }
+}

test/unit/unitTestAllConfigs.spec.ts

@@ -0,0 +1,15 @@
+import path from 'path';
+import { setupNuxtTestWithConfig } from './setupTypeTest';
+import { globby } from 'globby';
+
+describe.sequential('Testing types with different configs', async () => {
+  try {
+    const allConfigs = await globby('test/samples-config', { absolute: false });
+    for (let config of allConfigs) {
+      const configFileName = path.parse(config).name;
+      await setupNuxtTestWithConfig(configFileName);
+    }
+  } catch (e: any) {
+    throw new Error(e);
+  }
+});

test/utils/index.ts

@@ -1,6 +1,26 @@
-export * from './tsd.utils';
-export * from './typecheck';
+import type { NuxtConfig } from '@nuxt/schema';
+import { globbySync } from 'globby';
 
 export function timeout(count: number) {
   return new Promise((resolve) => setTimeout(resolve, count));
 }
+
+export function getConfigFromName(configName: string, config: NuxtConfig): NuxtConfig {
+  const files = globbySync(`test/fixtures/sample-project/tests/[${configName}]`);
+  return {
+    ...config,
+    nuxtTypedRouter: {
+      ...config.nuxtTypedRouter,
+      ignoreRoutes: ['[...404].vue', '[tests]/**/*.vue'],
+    },
+    typescript: {
+      tsConfig: {
+        files: [
+          ...files.map((m) => m.replace('test/fixtures/sample-project', '..')),
+          `../src/pages/[tests]/[${configName}].vue`,
+        ],
+        exclude: ['../tests/**/*', '../src/pages/[tests]/**/*.vue'],
+      },
+    },
+  };
+}

vite.config.ts

@@ -4,8 +4,18 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   test: {
     globals: true,
-    testTimeout: 10000,
     passWithNoTests: true,
+    pool: 'forks',
+    poolOptions: {
+      forks: {
+        singleFork: true,
+      },
+    },
+    sequence: {
+      concurrent: false,
+      hooks: 'list',
+      setupFiles: 'list',
+    },
   },
   resolve: {
     alias: {