chore: jest changed to vitest

package.json

@@ -35,21 +35,21 @@
     "postsite:preview": "cp _site/index.html _site/404.html",
     "lint": "eslint --ext .ts,.tsx ./ --max-warnings 0",
     "lint:fix": "eslint --ext .ts,.tsx ./ --max-warnings 0 --fix",
-    "test": "npm run test:unit",
-    "test:update": "npm run test:unit-update",
-    "test:unit": "bash -c 'jest --coverage --config test/config/jest.unit.conf.js ${1}' -- ",
-    "test:unit-update": "jest --config test/config/jest.unit.conf.js --updateSnapshot --coverage",
-    "test:node": "jest --config test/config/jest.ssr.conf.js",
-    "test:node-update": "jest --config test/config/jest.ssr.conf.js --updateSnapshot --coverage",
-    "test:watch": "jest --config test/config/jest.unit.conf.js --watch",
-    "test:coverage": "npm run test:update",
+    "test": "npm run test:unit && npm run test:snap",
+    "test:unit": "vitest run",
+    "test:unit-dev": "vitest",
+    "test:unit-gui": "vitest --ui",
+    "test:unit-coverage": "vitest run --coverage",
+    "test:snap": "cross-env NODE_ENV=test-snap vitest run",
+    "test:snap-update": "cross-env NODE_ENV=test-snap vitest run -u",
+    "generate:coverage-badge": "node script/generate-coverage.js",
     "prebuild": "rimraf es/* lib/* dist/* esm/*",
     "build": "cross-env NODE_ENV=production rollup -c script/rollup.config.js && npm run build:tsc",
     "build:tsc": "concurrently \"npm:build:tsc-*\"",
-    "build:tsc-es": "tsc --emitDeclarationOnly -d --outDir es/",
-    "build:tsc-esm": "tsc --emitDeclarationOnly -d --outDir esm/",
-    "build:tsc-lib": "tsc --emitDeclarationOnly -d --outDir lib/",
-    "build:tsc-cjs": "tsc --emitDeclarationOnly -d --outDir cjs/"
+    "build:tsc-es": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir es/",
+    "build:tsc-esm": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir esm/",
+    "build:tsc-lib": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir lib/",
+    "build:tsc-cjs": "tsc --emitDeclarationOnly -d -p ./tsconfig.build.json --outDir cjs/"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -95,6 +95,9 @@
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "@vitejs/plugin-react": "^1.1.1",
+    "@vitest/coverage-c8": "^0.24.1",
+    "@vitest/coverage-istanbul": "^0.24.1",
+    "@vitest/ui": "^0.24.1",
     "autoprefixer": "^10.4.0",
     "babel-jest": "^27.5.1",
     "babel-polyfill": "^6.26.0",
@@ -105,6 +108,7 @@
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.12",
     "cz-conventional-changelog": "^3.3.0",
+    "dom-parser": "^0.1.6",
     "eslint": "^8.4.1",
     "eslint-config-airbnb": "^19.0.2",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -118,12 +122,10 @@
     "gray-matter": "^4.0.3",
     "husky": "^7.0.4",
     "inquirer": "^8.2.0",
-    "jest": "^27.5.1",
-    "jest-html-reporter": "^3.4.2",
-    "jest-transform-stub": "^2.0.0",
-    "jest-watch-typeahead": "^1.0.0",
+    "jsdom": "^24.1.0",
     "less": "^4.1.2",
     "markdown-it-fence": "^0.1.3",
+    "mockdate": "^3.0.5",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.5",
     "prismjs": "^1.25.0",
@@ -143,11 +145,11 @@
     "rollup-plugin-typescript2": "^0.31.2",
     "tdesign-icons-view": "^0.1.0",
     "tdesign-site-components": "^0.13.10",
-    "ts-jest": "^27.1.3",
     "typescript": "^4.5.3",
     "vite": "^2.7.0",
     "vite-plugin-pwa": "^0.11.11",
     "vite-plugin-tdoc": "^2.0.0",
+    "vitest": "^0.24.1",
     "workbox-precaching": "^6.3.0"
   },
   "dependencies": {

script/generate-coverage.js

@@ -0,0 +1,54 @@
+const fs = require('fs');
+const path = require('path');
+const camelCase = require('lodash/camelCase');
+
+const DomParser = require('dom-parser');
+
+const parser = new DomParser();
+
+function resolveCwd(...args) {
+  args.unshift(process.cwd());
+  return path.join(...args);
+}
+
+fs.readFile(resolveCwd('test/coverage/index.html'), 'utf8', (err, html) => {
+  if (err) {
+    console.log('please execute npm run test:unit-coverage first!', err);
+    return;
+  }
+
+  if (!err) {
+    const dom = parser.parseFromString(html);
+    const tds = dom.getElementsByTagName('td');
+
+    const size = 10;
+    const groups = Math.ceil(tds.length / size);
+    const componentCoverage = [];
+    for (let i = 0; i < groups; i++) {
+      componentCoverage.push(tds.slice(i * size, (i + 1) * size));
+    }
+
+    const resultCoverage = {};
+    componentCoverage.forEach((item, index) => {
+      const dataVal = item[0].getAttribute('data-value');
+
+      const name = dataVal;
+      const statements = `${item[2].getAttribute('data-value')}%`;
+      const branches = `${item[4].getAttribute('data-value')}%`;
+      const functions = `${item[6].getAttribute('data-value')}%`;
+      const lines = `${item[8].getAttribute('data-value')}%`;
+
+      const key = camelCase(name);
+      resultCoverage[key] = {
+        statements,
+        branches,
+        functions,
+        lines,
+      };
+    });
+
+    const finalRes = `module.exports = ${JSON.stringify(resultCoverage)}`;
+    fs.writeFileSync(resolveCwd('site/test-coverage.js'), finalRes);
+    console.log('successful re-generate coverage');
+  }
+});

site/plugin-tdoc/md-to-react.js

@@ -2,20 +2,20 @@
 import fs from 'fs';
 import path from 'path';
 import matter from 'gray-matter';
-// import camelCase from 'camelcase';
+import camelCase from 'camelcase';
 
-// import testCoverage from '../test-coverage';
+import testCoverage from '../test-coverage';
 
 import { transformSync } from '@babel/core';
 
 export default function mdToReact(options) {
   const mdSegment = customRender(options);
   const { demoCodesDefsStr } = options;
 
-  // let coverage = '';
-  // if (mdSegment.isComponent) {
-  //   coverage = testCoverage[camelCase(mdSegment.componentName)] || '0%';
-  // }
+  let coverage = '';
+  if (mdSegment.isComponent) {
+    coverage = testCoverage[camelCase(mdSegment.componentName)] || {};
+  }
 
   const reactSource = `
     import React, { useEffect, useRef, useState } from 'react';\n
@@ -85,7 +85,25 @@ export default function mdToReact(options) {
                 ref={tdDocHeader}
                 spline="${mdSegment.spline}"
                 platform="mobile"
-              ></td-doc-header>`
+              >
+               ${
+                 mdSegment.isComponent
+                   ? `
+                    <td-doc-badge style={{ marginRight: '10px' }} slot="badge" label="coverages: lines" message="${
+                      coverage.lines || '0%'
+                    }" />
+                    <td-doc-badge style={{ marginRight: '10px' }} slot="badge" label="coverages: functions" message="${
+                      coverage.functions || '0%'
+                    }" />
+                    <td-doc-badge style={{ marginRight: '10px' }} slot="badge" label="coverages: statements" message="${
+                      coverage.statements || '0%'
+                    }" />
+                    <td-doc-badge style={{ marginRight: '10px' }} slot="badge" label="coverages: branches" message="${
+                      coverage.branches || '0%'
+                    }" />`
+                   : ''
+               }
+              </td-doc-header>`
               : ''
           }
           {

site/test-coverage.js

@@ -0,0 +1,4 @@
+module.exports = {
+  button: { statements: '100%', branches: '66.66%', functions: '100%', lines: '100%' },
+  configProvider: { statements: '100%', branches: '100%', functions: '100%', lines: '100%' },
+};

site/vite.config.js

@@ -26,6 +26,7 @@ export default ({ mode }) =>
         '@components': path.resolve(__dirname, './src/components'),
         '@common': path.resolve(__dirname, '../src/_common'),
         'tdesign-mobile-react': path.resolve(__dirname, '../src'),
+        '@test/utils': path.resolve(__dirname, '../test/utils'),
       },
     },
     build: {

src/button/__tests__/__snapshots__/button.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1
 
 exports[`base.jsx 1`] = `
 <DocumentFragment>

src/button/__tests__/button.test.tsx

@@ -1,10 +1,7 @@
 import React from 'react';
-import { testExamples, render } from '@test/utils';
+import { render } from '@test/utils';
 import Button from '../Button';
 
-// 测试组件代码 Example 快照
-testExamples(__dirname);
-
 describe('Button 组件测试', () => {
   const ButtonText = '按钮组件';
   test('content', async () => {