test: 🧪 improve tests locally (#312)

Currently local and CI tests work differently. This PR overcomes this problem by using the `UMD` build or `pnpm build` and `pnpm build.verify`, too.
solid-design-system · Aug 1, 2023 · 6b919e9 · 6b919e9
1 parent 75e0f9c
commit 6b919e9
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 16 deletions.
diff --git a/.github/workflows/check-pr.yml b/.github/workflows/check-pr.yml
@@ -46,4 +46,4 @@ jobs:
               run: cd packages/components && pnpm ci.optimize-chromatic
 
             - name: (components) test
-              run: cd packages/components && pnpm test
+              run: cd packages/components && pnpm test.verify
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -54,11 +54,12 @@
     "build.storybook": "storybook build --output-dir dist/storybook && cp dist/custom-elements.json dist/storybook/custom-elements.json",
     "build.chromatic": "pnpm build.storybook && pnpm ci.optimize-chromatic",
     "preview": "vite preview",
-    "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test && echo '✅ Test verified'",
+    "verify": "pnpm ts.verify && pnpm build && echo '✅ Build verified' && pnpm ci.optimize-chromatic && echo '✅ Chromatic optimization verified' && pnpm test.verify && echo '✅ Test verified'",
     "ts.verify": "tsc --noEmit --project ./tsconfig.json && echo '✅ TypeScript verified'",
     "plop": "plop --plopfile scripts/plop/plopfile.js",
     "ci.optimize-chromatic": "node ./scripts/storybook/optimize-chromatic.cjs",
-    "test": "web-test-runner --group default",
+    "test": "pnpm build.components && web-test-runner --group default",
+    "test.verify": "web-test-runner --group default",
     "test.component": "web-test-runner -- --watch --group",
     "test.watch": "web-test-runner --watch --group default",
     "storybook": "storybook dev -p 6999",

diff --git a/packages/components/web-test-runner.config.js b/packages/components/web-test-runner.config.js
@@ -11,29 +11,21 @@ if (!process.env.CI) {
 export default {
   rootDir: '.',
   files: 'src/components/**/*.test.ts', // "default" group
-  concurrentBrowsers: 3,
+  concurrentBrowsers: 1,
   nodeResolve: true,
   testFramework: {
     config: {
-      timeout: 3000
+      timeout: 3000,
+      retries: 5
     }
   },
   plugins: [vitePlugin()],
   browsers,
   filterBrowserLogs: removeViteLogging,
   testRunnerHtml: testFramework => {
-    if (!process.env.CI) {
+    // Always use the `umd` build when testing the whole library as this is more consistent
+    if (process.env.npm_lifecycle_event === 'test' || process.env.npm_lifecycle_event === 'test.verify') {
       return `
-   <html lang="en-US">
-     <head></head>
-     <body>
-       <script type="module" src="src/solid-components.ts"></script>
-       <script type="module" src="${testFramework}"></script>
-     </body>
-   </html>
- `;
-    }
-    return `
   <html lang="en-US">
     <head></head>
     <body>
@@ -42,6 +34,16 @@ export default {
     </body>
   </html>
 `;
+    }
+    return `
+   <html lang="en-US">
+     <head></head>
+     <body>
+       <script type="module" src="src/solid-components.ts"></script>
+       <script type="module" src="${testFramework}"></script>
+     </body>
+   </html>
+ `;
   },
   // Create a named group for every test file to enable running single tests. If a test file is `split-panel.test.ts`
   // then you can run `npm run test -- --group split-panel` to run only that component's tests.