test(bundler): migrate bundler tests from Karma to Jest + Puppeteer

.github/workflows/build.yml

@@ -16,25 +16,25 @@ jobs:
         os: ['ubuntu-22.04', 'windows-latest']
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout Code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: 📥 Checkout Code
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
-      - name: Get Core Dependencies
+      - name: 🕸️ Get Core Dependencies
         uses: ./.github/workflows/actions/get-core-dependencies
 
-      - name: Core Build
+      - name: 🏗️ Core Build
         run: npm run build -- --ci
         shell: bash
 
-      - name: Validate Build
+      - name: 🔬 Validate Build
         run: npm run test.dist
         shell: bash
 
-      - name: Validate Testing
+      - name: 🔬 Validate Testing
         run: npm run test.testing
         shell: bash
 
-      - name: Upload Build Artifacts
+      - name: 📤 Upload Build Artifacts
         if: ${{ matrix.os == 'ubuntu-22.04' }}
         uses: ./.github/workflows/actions/upload-archive
         with:

.github/workflows/create-production-pr.yml

@@ -32,48 +32,48 @@ jobs:
       pull-requests: write
     steps:
       # Log the input from GitHub Actions for easy traceability
-      - name: Log GitHub Input
+      - name: 🔏Log GitHub Input
         run: |
           echo "Version: ${{ inputs.version }}"
         shell: bash
 
-      - name: Checkout Code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: 📥 Checkout Code
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           # A depth of 0 gets the entire git history, which we'll want for things like checking all git history/tags.
           # We need git history to generate the changelog; however, we don't know how deep to go.
           # Since publishing is a one-off activity, just get everything.
           fetch-depth: 0
           ref: ${{ inputs.base }}
 
-      - name: Get Core Dependencies
+      - name: 🕸️ Get Core Dependencies
         uses: ./.github/workflows/actions/get-core-dependencies
 
       # TODO(STENCIL-927): Backport changes to the v3 branch
-      - name: Run Publish Preparation Script
+      - name: 📦Run Publish Preparation Script
         run: npm run release.ci.prepare -- --version ${{ inputs.version }}
         shell: bash
 
-      - name: Log Generated Changes
+      - name: 📝 Log Generated Changes
         run: git --no-pager diff
         shell: bash
 
-      - name: Generate Version String and Branch Name
+      - name: 🏷️ Generate Version String and Branch Name
         id: name_gen
         run: |
           VERSION_STR=$(jq '.version' package.json | sed s/\"//g)
           echo "VERSION_STR=$VERSION_STR" >> "$GITHUB_OUTPUT"
           echo "BRANCH_NAME=release/$VERSION_STR-run-${{ github.run_number }}-${{ github.run_attempt }}" >> "$GITHUB_OUTPUT"
         shell: bash
 
-      - name: Print Version String and Branch Name
+      - name: 🖨️ Print Version String and Branch Name
         run: |
           echo Version: ${{ steps.name_gen.outputs.VERSION_STR }}
           echo Branch Name: ${{ steps.name_gen.outputs.BRANCH_NAME }}
         shell: bash
 
-      - name: Create the Pull Request
-        uses: peter-evans/create-pull-request@6d6857d36972b65feb161a90e484f2984215f83e # v6.0.5
+      - name: 📤 Create the Pull Request
+        uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
         with:
           # create a new pull request using the specified base branch
           base: ${{ inputs.base }}

.github/workflows/lint-and-format.yml

@@ -14,18 +14,18 @@ jobs:
     name: Check
     runs-on: 'ubuntu-22.04'
     steps:
-      - name: Checkout Code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: 📥 Checkout Code
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
-      - name: Get Core Dependencies
+      - name: 🕸️ Get Core Dependencies
         uses: ./.github/workflows/actions/get-core-dependencies
 
-      - name: ESLint
+      - name: 🖌️ ESLint
         run: npm run lint
 
-      - name: Prettier Check
+      - name: 🖌️ Prettier Check
         run: npm run prettier.dry-run
         shell: bash
 
-      - name: Spellcheck
+      - name: 📚 Spellcheck
         run: npm run spellcheck

.github/workflows/main.yml

@@ -19,54 +19,54 @@ permissions:
 
 jobs:
   build_core:
-    name: Build
+    name: 🏗️ Build
     uses: ./.github/workflows/build.yml
 
   lint_and_format:
-    name: Lint and Format
+    name: 🖌️ Lint and Format
     uses: ./.github/workflows/lint-and-format.yml
 
   type_tests:
-    name: Type Tests
+    name: 🧪 Type Tests
     needs: [build_core]
     uses: ./.github/workflows/test-types.yml
 
   analysis_tests:
-    name: Analysis Tests
+    name: 🔬 Analysis Tests
     needs: [build_core]
     uses: ./.github/workflows/test-analysis.yml
 
   docs_build_tests:
-    name: Docs Build Tests
+    name: 🏗️ Docs Build Tests
     needs: [build_core]
     uses: ./.github/workflows/test-docs-build.yml
 
   bundler_tests:
-    name: Bundler Tests
+    name: 🧪 Bundler Tests
     needs: [build_core]
     uses: ./.github/workflows/test-bundlers.yml
 
   copytask_tests:
-    name: Copy Task Tests
+    name: 🧪 Copy Task Tests
     needs: [build_core]
     uses: ./.github/workflows/test-copytask.yml
 
   component_starter_tests:
-    name: Component Starter Smoke Test
+    name: 🧪 Component Starter Smoke Test
     needs: [build_core]
     uses: ./.github/workflows/test-component-starter.yml
 
   e2e_tests:
-    name: E2E Tests
+    name: 🧪 E2E Tests
     needs: [build_core]
     uses: ./.github/workflows/test-e2e.yml
 
   unit_tests:
-    name: Unit Tests
+    name: 🧪 Unit Tests
     needs: [build_core]
     uses: ./.github/workflows/test-unit.yml
 
   wdio_tests:
-    name: WebdriverIO Tests
+    name: 🧪 WebdriverIO Tests
     needs: [build_core]
     uses: ./.github/workflows/test-wdio.yml

.github/workflows/test-analysis.yml

@@ -18,28 +18,28 @@ jobs:
         os: ['ubuntu-latest', 'windows-latest']
     runs-on: ${{ matrix.os }}
     steps:
-      - name: Checkout Code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: 📥 Checkout Code
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
-      - name: Get Core Dependencies
+      - name: 🕸️ Get Core Dependencies
         uses: ./.github/workflows/actions/get-core-dependencies
 
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@1e60f620b9541d16bece96c5465dc8ee9832be0b # v4.0.3
+      - name: 🟢 Use Node ${{ matrix.node }}
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: ${{ matrix.node }}
           cache: 'npm'
 
-      - name: Download Build Archive
+      - name: 📥 Download Build Archive
         uses: ./.github/workflows/actions/download-archive
         with:
           name: stencil-core
           path: .
           filename: stencil-core-build.zip
 
-      - name: Analysis Tests
+      - name: 🔬 Analysis Tests
         run: npm run test.analysis
         shell: bash
 
-      - name: Check Git Context
+      - name: 🔍 Check Git Context
         uses: ./.github/workflows/actions/check-git-context

.github/workflows/test-bundlers.yml

@@ -13,22 +13,70 @@ jobs:
     name: Verify Bundlers
     runs-on: 'ubuntu-22.04'
     steps:
-      - name: Checkout Code
-        uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - name: 📥 Checkout Code
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
-      - name: Get Core Dependencies
+      - name: 🕸️ Get Core Dependencies
         uses: ./.github/workflows/actions/get-core-dependencies
 
-      - name: Download Build Archive
+      - name: 📥 Download Build Archive
         uses: ./.github/workflows/actions/download-archive
         with:
           name: stencil-core
           path: .
           filename: stencil-core-build.zip
 
-      - name: Bundler Tests
-        run: npm run test.bundlers
+      - name: 🧲 Install Puppeteer and Download Chrome
         shell: bash
+        run: |
+          # Reinstall puppeteer to ensure puppeteer-core is properly installed
+          # (sometimes npm ci doesn't install peer deps correctly in CI)
+          npm install --no-save puppeteer
+          # Download the Chrome binary
+          npx puppeteer browsers install chrome
 
-      - name: Check Git Context
+      - name: 🧱 Build bundler fixtures (component-lib + Vite app)
+        shell: bash
+        run: |
+          cd test/bundler
+          npm run build.component-lib
+          npm run build.vite
+
+      # Compile the TS bundler spec to JS to avoid installing ts-jest in CI
+      - name: 🛠️ Compile bundler spec to JS
+        shell: bash
+        run: |
+          cd test/bundler
+          cat > tsconfig.test.json << 'EOF'
+          {
+            "compilerOptions": {
+              "module": "commonjs",
+              "target": "ES2020",
+              "lib": ["ES2020", "DOM"],
+              "esModuleInterop": true,
+              "skipLibCheck": true,
+              "outDir": "./dist-spec"
+            },
+            "include": [
+              "vite-bundle-test/vite-bundle.spec.ts"
+            ]
+          }
+          EOF
+          npx tsc -p tsconfig.test.json
+
+      - name: 🧪 Bundler Tests
+        shell: bash
+        run: |
+          cd test/bundler
+          # Create a minimal Jest config that does not use ts-jest
+          cat > jest.config.ci.js << 'EOF'
+          module.exports = {
+            testEnvironment: 'node',
+            testMatch: ['<rootDir>/dist-spec/vite-bundle.spec.js'],
+          };
+          EOF
+          # Run Jest from repo root against compiled JS using CI config
+          node ../../node_modules/jest/bin/jest.js --config=jest.config.ci.js --testTimeout=30000
+
+      - name: 🔍 Check Git Context
         uses: ./.github/workflows/actions/check-git-context