diff --git a/dolphinscheduler-ui/_test_/.babelrc b/dolphinscheduler-ui/_test_/.babelrc
new file mode 100644
index 0000000000..bae693584c
--- /dev/null
+++ b/dolphinscheduler-ui/_test_/.babelrc
@@ -0,0 +1,8 @@
+{
+    "presets": [["env", { "modules": false }]],
+    "env": {
+      "test": {
+        "presets": [["env", { "targets": { "node": "current" } }]]
+      }
+    }
+  }
\ No newline at end of file
diff --git a/dolphinscheduler-ui/_test_/Counter.spec.js b/dolphinscheduler-ui/_test_/Counter.spec.js
new file mode 100644
index 0000000000..9530d76300
--- /dev/null
+++ b/dolphinscheduler-ui/_test_/Counter.spec.js
@@ -0,0 +1,55 @@
+
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { mount } from '@vue/test-utils'
+import Counter from '../src/components/Counter.vue'
+
+describe("Counter.vue", () => {
+    it("渲染Counter组件", () => {
+        const wrapper = mount(Counter)
+        expect(wrapper.element).toMatchSnapshot()
+    })
+
+    it("初始化之为0", () => {
+        const wrapper = mount(Counter)
+        expect(wrapper.vm.count).toEqual(0)
+    })
+
+    it("加1", () => {
+        const wrapper = mount(Counter)
+        wrapper.vm.inc()
+        expect(wrapper.vm.count).toEqual(1)
+    })
+
+    it("减1", () => {
+        const wrapper = mount(Counter)
+        wrapper.vm.dec()
+        expect(wrapper.vm.count).toEqual(-1)
+    })
+
+    it("重置", () => {
+        const wrapper = mount(Counter)
+        wrapper.vm.reset()
+        expect(wrapper.vm.count).toEqual(0)
+    })
+
+    it("因数为10加1操作", () => {
+        const wrapper = mount(Counter, { propsData: { factor: 10 } })
+        wrapper.vm.inc()
+        expect(wrapper.vm.computedCount).toEqual(10)
+    })
+})
\ No newline at end of file
diff --git a/dolphinscheduler-ui/_test_/package.json b/dolphinscheduler-ui/_test_/package.json
new file mode 100644
index 0000000000..df47d10c0a
--- /dev/null
+++ b/dolphinscheduler-ui/_test_/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "testjest",
+  "description": "jest",
+  "version": "1.0.0",
+  "author": "xiangcaibiao",
+  "private": true,
+  "scripts": {
+    "test": "jest --coverage"
+  },
+  "dependencies": {
+    "vue": "^2.4.4"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "vue"
+    ],
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "transform": {
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+    },
+    "snapshotSerializers": [
+      "<rootDir>/node_modules/jest-serializer-vue"
+    ]
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.30",
+    "babel-jest": "^24.9.0",
+    "babel-preset-env": "^1.7.0",
+    "jest": "^24.9.0",
+    "jest-serializer-vue": "^2.0.2",
+    "vue-jest": "^3.0.5"
+  }
+}
diff --git a/dolphinscheduler-ui/_test_/test.spec.js b/dolphinscheduler-ui/_test_/test.spec.js
new file mode 100644
index 0000000000..27b863fe8a
--- /dev/null
+++ b/dolphinscheduler-ui/_test_/test.spec.js
@@ -0,0 +1,34 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { shallowMount } from '@vue/test-utils'
+import Message from '../src/components/Message.vue'
+
+describe('Message', () => {
+  it('renders props.msg when passed', () => {
+    const msg = 'new message'
+    const wrapper = shallowMount(Message, {
+      propsData: { msg }
+    })
+    expect(wrapper.text()).toBe(msg)
+  })
+
+  it('renders default message if not passed a prop', () => {
+    const defaultMessage = 'default message'
+    const wrapper = shallowMount(Message)
+    expect(wrapper.text()).toBe(defaultMessage)
+  })
+})
diff --git a/dolphinscheduler-ui/src/components/Counter.vue b/dolphinscheduler-ui/src/components/Counter.vue
new file mode 100644
index 0000000000..6fafb5a54e
--- /dev/null
+++ b/dolphinscheduler-ui/src/components/Counter.vue
@@ -0,0 +1,53 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <div>
+    <div>{{ computedCount }}</div>
+    <button @click="inc">加</button>
+    <button @click="dec">减</button>
+    <button @click="reset">重置</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    factor: { type: Number, default: 1 }
+  },
+  data() {
+    return {
+      count: 0
+    };
+  },
+  methods: {
+    inc() {
+      this.count++;
+    },
+    dec() {
+      this.count--;
+    },
+    reset() {
+      this.count = 0;
+    }
+  },
+  computed: {
+    computedCount: function() {
+      return this.count * this.factor;
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/dolphinscheduler-ui/src/components/Message.vue b/dolphinscheduler-ui/src/components/Message.vue
new file mode 100644
index 0000000000..95f5236b6e
--- /dev/null
+++ b/dolphinscheduler-ui/src/components/Message.vue
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+<template>
+  <h1> {{ msg || 'default message' }}</h1>
+</template>
+
+<script>
+export default {
+  name: 'message',
+  props: [
+    'msg'
+  ]
+}
+</script>
\ No newline at end of file