feat(cli): 增加jest单测命令 一键执行所有单测文件 或是执行某一个组件的单测文件

affects: @varlet/cli, @varlet/ui

package.json

@@ -38,7 +38,9 @@
       "packages/varlet-cli/lib/**",
       "packages/varlet-cli/site/**",
       "packages/varlet-ui/es/**",
-      "packages/varlet-ui/cjs/**"
+      "packages/varlet-ui/cjs/**",
+      "packages/varlet-ui/umd/**",
+      "packages/varlet-ui/src/*/__tests__/**"
     ],
     "extends": [
       "@varlet"

packages/varlet-cli/package.json

@@ -33,6 +33,7 @@
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-typescript": "^7.12.1",
+    "@testing-library/vue": "^6.0.0",
     "@vue/compiler-sfc": "^3.0.2",
     "autoprefixer": "8.0.0",
     "babel-loader": "^8.1.0",
@@ -47,6 +48,7 @@
     "fs-extra": "^9.0.1",
     "hash-sum": "^2.0.0",
     "html-webpack-plugin": "^4.5.0",
+    "jest": "^26.6.3",
     "less": "^3.12.2",
     "less-loader": "^7.0.2",
     "mini-css-extract-plugin": "^1.2.1",
@@ -66,6 +68,7 @@
     "@types/babel__core": "^7.1.12",
     "@types/fs-extra": "^9.0.2",
     "@types/hash-sum": "^1.0.0",
+    "@types/jest": "^26.0.15",
     "@types/mini-css-extract-plugin": "^1.2.0",
     "@types/webpack-dev-server": "^3.11.1"
   },

packages/varlet-cli/src/commands/jest.ts

@@ -0,0 +1,18 @@
+import { runCLI } from 'jest'
+import { resolve } from 'path'
+import { CWD, JEST_CONFIG, SRC_DIR } from '../shared/constant'
+import logger from '../shared/logger'
+
+export async function jest(cmd: { component?: string }) {
+  const rootDir = cmd.component ? resolve(SRC_DIR, cmd.component) : CWD
+
+  const config = {
+    rootDir,
+    config: JEST_CONFIG,
+  }
+  try {
+    await runCLI(config as any, [CWD])
+  } catch (e) {
+    logger.error(e.toString())
+  }
+}

packages/varlet-cli/src/compiler/compileCJS.ts

@@ -10,7 +10,7 @@ export async function compileCJSDir(cjsDir: string[], dirPath: string) {
   await Promise.all(
     cjsDir.map((filename: string) => {
       const path: string = resolve(dirPath, filename)
-      return isDir(path) ? compileComponent(path) : null
+      return isDir(path) ? compileComponent(path, 'cjs') : null
     })
   )
   compileLibraryEntry(dirPath, getDirComponentNames(cjsDir), 'cjs')
@@ -19,8 +19,8 @@ export async function compileCJSDir(cjsDir: string[], dirPath: string) {
 export async function compileCJS() {
   try {
     await copy(SRC_DIR, CJS_DIR)
-    const esDir: string[] = await readdir(CJS_DIR)
-    await compileCJSDir(esDir, CJS_DIR)
+    const cjsDir: string[] = await readdir(CJS_DIR)
+    await compileCJSDir(cjsDir, CJS_DIR)
   } catch (e) {
     logger.error(e.toString())
   }

packages/varlet-cli/src/config/jest.config.ts

@@ -0,0 +1,10 @@
+import { JEST_MEDIA_MOCK, JEST_STYLE_MOCK } from '../shared/constant'
+
+module.exports = {
+  moduleNameMapper: {
+    '\\.(css|less|scss)$': JEST_STYLE_MOCK,
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': JEST_MEDIA_MOCK,
+  },
+  moduleFileExtensions: ['js'],
+  transformIgnorePatterns: ['/node_modules/'],
+}

packages/varlet-cli/src/config/jest.media.mock.ts

@@ -0,0 +1 @@
+module.exports = {}

packages/varlet-cli/src/config/jest.style.mock.ts

@@ -0,0 +1 @@
+module.exports = {}

packages/varlet-cli/src/index.ts

@@ -4,6 +4,7 @@ import { dev } from './commands/dev'
 import { build } from './commands/build'
 import { compile } from './commands/compile'
 import { create } from './commands/create'
+import { jest } from './commands/jest'
 
 command('dev')
   .description('Run varlet development environment')
@@ -15,11 +16,16 @@ command('build')
 
 command('compile')
   .description('Compile varlet components library code')
-  .option('--watch', 'Watch files change auto compile')
+  .option('-w, --watch', 'Watch files change auto compile')
   .action(compile)
 
 command('create <name>')
   .description('Create a component directory')
   .action(create)
 
+command('jest')
+  .option('-c, --component [componentName]', 'Run Jest in component directory')
+  .description('Run Jest in work directory')
+  .action(jest)
+
 parse()

packages/varlet-cli/src/shared/constant.ts

@@ -19,3 +19,7 @@ export const DOCS_DIR_NAME = 'docs'
 export const EXAMPLE_DIR_INDEX = 'index.vue'
 export const TESTS_DIR_NAME = '__tests__'
 export const EXTENSIONS = ['.vue', '.ts', '.js', '.less', '.css']
+
+export const JEST_CONFIG = resolve(__dirname, '../config/jest.config.js')
+export const JEST_MEDIA_MOCK = resolve(__dirname, '../config/jest.media.mock.js')
+export const JEST_STYLE_MOCK = resolve(__dirname, '../config/jest.style.mock.js')

packages/varlet-ui/package.json

@@ -7,6 +7,11 @@
     "Material",
     "UI"
   ],
+  "files": [
+    "es",
+    "cjs",
+    "umd"
+  ],
   "author": "haoziqaq <[email protected]>",
   "license": "MIT",
   "main": "lib/varlet-ui.js",
@@ -19,7 +24,8 @@
     "build": "varlet-cli build",
     "compile": "varlet-cli compile",
     "compile:watch": "varlet-cli compile --watch",
-    "create": "varlet-cli create"
+    "create": "varlet-cli create",
+    "jest": "varlet-cli jest"
   },
   "bugs": {
     "url": "https://github.com/haoziqaq/varlet/issues"

packages/varlet-ui/src/button/Button.vue

@@ -1,13 +1,26 @@
 <template>
-  <div class="varlet-button lock"></div>
+  <div class="varlet-button lock">
+    <p>Times clicked: {{ count }}</p>
+    <button @click="increment">increment</button>
+  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, Ref } from 'vue'
 import '../styles/common.less'
 
 export default defineComponent({
-  name: 'VarletButton'
+  name: 'VarletButton',
+  setup() {
+    const count: Ref<number> = ref(0)
+
+    return {
+      count,
+      increment() {
+        count.value++
+      }
+    }
+  }
 })
 </script>
 

packages/varlet-ui/src/button/__tests__/index.spec.js

@@ -0,0 +1,18 @@
+const Button = require('../../../cjs/button').default
+const { render, fireEvent } = require('@testing-library/vue')
+
+test('increments value on click', async () => {
+  const { getByText } = render(Button)
+
+  // getByText returns the first matching node for the provided text, and
+  // throws an error if no elements match or if more than one match is found.
+  getByText('Times clicked: 0')
+
+  const button = getByText('increment')
+
+  // Dispatch a native click event to our button element.
+  await fireEvent.click(button)
+  await fireEvent.click(button)
+
+  getByText('Times clicked: 2')
+})

packages/varlet-ui/src/button/example/index.vue

@@ -4,7 +4,7 @@
 
 <script>
 export default {
-	name: 'Index',
+	name: 'Index'
 }
 </script>
 

packages/varlet-ui/src/input/__tests__/index.spec.js

@@ -0,0 +1,3 @@
+test('test input', async () => {
+  console.log('hello')
+})