test: coverage report

Author: lumixraku

.github/workflows/e2e.yaml

@@ -9,6 +9,7 @@ on:
 env:
   NODE_VERSION: 18
   PNPM_VERSION: 8.5.0
+  COVERAGE: "true"
 
 jobs:
   test:
@@ -36,8 +37,9 @@ jobs:
           build: pnpm run build
           start: pnpm run start
           browser: chrome
-        env:
-          COVERAGE: "true"
+
+      - name: Run Component Tests with Coverage
+        run: pnpm test:components:coverage
 
       - name: Upload coverage to Codecov
         uses: codecov/codecov-action@v3

.nycrc

@@ -7,9 +7,7 @@
   ],
   "exclude": [
     "cypress/**/*.*",
-    "**/*.d.ts",
-    "**/*.cy.tsx",
-    "**/*.cy.ts"
+    "**/*.d.ts"
   ],
   "reporter": [
     "text",

cypress.config.ts

@@ -1,18 +1,52 @@
 import { defineConfig } from 'cypress';
+import codeCoverageTask from '@cypress/code-coverage/task.js';
+import { execSync } from 'child_process';
 
 export default defineConfig({
   env: {
     codeCoverage: {
       exclude: ['cypress/**/*.*', '**/__tests__/**/*.*', '**/*.test.*'],
+      reportDir: 'coverage/cypress',
+      all: true,
+      include: ['src/**/*.ts', 'src/**/*.tsx'],
+      reporter: ['text', 'html', 'text-summary', 'json', 'lcov'],
+      tempDir: 'coverage/.nyc_output',
     },
   },
   watchForFileChanges: false,
   component: {
+    specPattern: '**/DatabaseWithFilter.cy.tsx',
     devServer: {
       framework: 'react',
       bundler: 'vite',
     },
     setupNodeEvents(on, config) {
+      codeCoverageTask(on, config);
+      
+      // 在测试完成后生成报告
+      on('after:run', async () => {
+        try {
+          // 确保目录存在
+          execSync('mkdir -p coverage/cypress');
+          // 运行 nyc 报告
+          execSync('nyc report --reporter=lcov --reporter=text --reporter=html --report-dir=coverage/cypress', {
+            stdio: 'inherit'
+          });
+        } catch (error) {
+          console.error('Error generating coverage report:', error);
+        }
+      });
+
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        table(message) {
+          console.table(message);
+          return null;
+        }
+      });
       return config;
     },
     supportFile: 'cypress/support/component.ts',

cypress/support/component.ts

@@ -12,11 +12,12 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
-import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
-import 'cypress-real-events';
 
-// Import commands.js using ES2015 syntax:
+// Import code coverage support first
 import '@cypress/code-coverage/support';
+
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+import 'cypress-real-events';
 import 'cypress-real-events/support';
 import './commands';
 import './document';

vite.config.ts

@@ -81,6 +81,8 @@ export default defineConfig({
         'cypress/**/*',
         'node_modules/**/*',
       ],
+      extension: ['.js', '.jsx', '.ts', '.tsx'],
+      checkProd: false,
     }) : undefined,
     process.env.ANALYZE_MODE
       ? visualizer({