test: optimize test configuration and documentation

babel.config.js

@@ -12,9 +12,10 @@ module.exports = {
             'Edge >= 12',
           ],
         },
-        modules: false,
+        modules: 'commonjs',
       },
     ],
+    '@vue/babel-preset-jsx',
   ],
   env: {
     test: {
@@ -28,8 +29,8 @@ module.exports = {
             modules: 'commonjs',
           },
         ],
+        '@vue/babel-preset-jsx',
       ],
     },
   },
-  plugins: ['transform-vue-jsx'],
 };

jsx.d.ts

@@ -1,11 +1,13 @@
-declare namespace JSX {
-  interface Element {} //eslint-disable-line
+import Vue, { VNode } from 'vue';
 
-  interface ElementAttributesProperty { $props: {} }
-
-  // allows to use "noImplicitAny": true in tsconfig.json
-  interface IntrinsicElements {
-    [elemName: string]: any;
+declare global {
+  namespace JSX {
+    // tslint:disable no-empty-interface
+    type Element = VNode
+    // tslint:disable no-empty-interface
+    type ElementClass = Vue
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
   }
-
 }

script/test/jest.base.conf.js

@@ -1,13 +1,14 @@
 const path = require('path');
-// const libDir = process.env.LIB_DIR;
 
 module.exports = {
   verbose: true,
   rootDir: path.resolve(__dirname, '../../'),
   testURL: 'http://localhost/',
   moduleFileExtensions: [
     'js',
+    'jsx',
     'ts',
+    'tsx',
     'vue',
     'json',
   ],
@@ -16,16 +17,18 @@ module.exports = {
     '^vue$': '<rootDir>/node_modules/vue/dist/vue.js',
   },
   transform: {
-    '.*\\.(vue)$': ['vue-jest', 'ts-jest'],
-    '\\.ts$': 'ts-jest',
-    '^.+\\.js$': 'babel-jest',
+    '.*\\.js$': 'babel-jest',
+    '.*\\.(vue)$': 'vue-jest',
+    '.*\\.tsx?$': 'ts-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
   testRegex: '(?<!snapshot)\\.test\\.js$',
   setupFiles: ['<rootDir>/script/test/setup'],
   globals: {
     'ts-jest': {
       tsConfig: '<rootDir>/tsconfig.json',
+      babelConfig: true,
     },
   },
+  snapshotSerializers: ['jest-serializer-vue'],
 };

script/test/jest.unit.conf.js

@@ -4,7 +4,7 @@ module.exports = {
   ...baseConfig,
   testEnvironment: 'jsdom',
   // 打开测试覆盖率报告
-  collectCoverage: true,
+  // collectCoverage: true,
   coverageDirectory: '<rootDir>/test/unit/coverage',
   collectCoverageFrom: [
     'src/**/*.{js,vue}',

script/test/setup.js

@@ -1,9 +1,5 @@
 import Vue from 'vue';
+import TDesign from '@/index';
 
-import Icon from '../../src/icon';
-import Button from '../../src/button';
-
+Vue.use(TDesign);
 Vue.config.productionTip = false;
-
-Vue.component('t-icon', Icon);
-Vue.component('t-button', Button);

test.md

@@ -32,26 +32,15 @@ npm run test:snapshot
 npm run test:unit
 ```
 
-### 2.1 注册组件
-在`script/test/setup.js`中注册要测试的组件
-
-### 2.2 添加单元测试用例
-
 - test/unit目录中，创建对应的组件目录，用于存放测试文件
-- 在上述测试组件目录中增加`index.test.js`
-- 用例书写请使用vue-test-utils
-
-## 3. 快照测试
-
-```
-npm run test:snapshot
-```
+- index.test.js 用于测试组件较细粒度的属性事件方法
+- demo.test.js 用于测试组件 demo 是否正常工作
 
-### 3.1 添加快照测试入口
+### 2.1 单元测试规范
+每个组件至少有一个单元测试文件 index.test.js 和一个 demo 测试文件 demo.test.js
 
-- 在test/unit对应的组件目录增加快照测试入口文件`snapshot.test.js`
-- 加入测试代码，测试代码请参考`test/unit/button/snapshot.test.js`
-- 运行测试命令时，会自动在当前目录下生成测试快照__snapshots__
+#### 单元测试文件
+需要对组件的 props/event/slot/methods 分别覆盖测试。具体组织方式可以参考 button，简单的渲染测试可以直接使用 snapshot
 
 ## 4. 服务端渲染测试
 

tsconfig.json

@@ -1,23 +1,25 @@
 {
   "compilerOptions": {
     "lib": [
+      "esnext",
       "dom",
-      "es6"
+      "dom.iterable",
+      "scripthost"
     ],
-    "target": "es2017",
+    "target": "esnext",
     "module": "esnext",
     "moduleResolution": "node",
     "isolatedModules": false,
     "experimentalDecorators": true,
+    "esModuleInterop": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
     "strictNullChecks": false,
     "removeComments": true,
     "suppressImplicitAnyIndexErrors": true,
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
-    "jsx": "preserve",
-    "jsxFactory": "h"
+    "jsx": "preserve"
   },
   "include": [
     "./**/*.ts",