diff --git a/packages/scrollbar/__tests__/scrollbar.spec.ts b/packages/scrollbar/__tests__/scrollbar.spec.ts
index 24029605d4..88c0f6bde5 100644
--- a/packages/scrollbar/__tests__/scrollbar.spec.ts
+++ b/packages/scrollbar/__tests__/scrollbar.spec.ts
@@ -1,15 +1,71 @@
 import { mount } from '@vue/test-utils'
-import Scrollbar from '../src/index.vue'
+import Scrollbar from '../src/index'
+const wait = (ms = 0) => (new Promise(resolve => setTimeout(() => resolve(), ms)))
+const makeScroll = async (dom, name, number ) => {
+  dom[name] = number
+  dom.dispatchEvent(new CustomEvent('scroll'))
+  // must use setTimeout instead of nextTick to wait dom change
+  return await wait()
+}
+const _mount = (template: string) => mount({
+  components: {
+    'el-scrollbar': Scrollbar,
+  },
+  template,
+})
 
-const AXIOM = 'Rem is the best girl'
-
-describe('Scrollbar.vue', () => {
-  test('render test', () => {
-    const wrapper = mount(Scrollbar, {
-      slots: {
-        default: AXIOM,
+describe('ScrollBar', () => {
+  test('vertical', async () => {
+    const outterHeight = 200
+    const innerHeight = 500
+    const wrapper = _mount(`
+      <el-scrollbar style="height: ${outterHeight}px">
+        <div style="height: ${innerHeight}px;"></div>
+      </el-scrollbar>
+`)
+    Object.defineProperties(window.HTMLElement.prototype, {
+      clientHeight: {
+        get () {
+          return outterHeight
+        },
+      },
+      scrollHeight:{
+        get () {
+          return innerHeight
+        },
       },
     })
-    expect(wrapper.text()).toEqual(AXIOM)
+    const scrollDom = wrapper.find('.el-scrollbar__wrap').element
+    await makeScroll(scrollDom, 'scrollTop', 100)
+    expect(wrapper.find('.is-vertical div').attributes('style')).toContain('height: 40%; transform: translateY(50%); webkit-transform: translateY(50%)')
+    await makeScroll(scrollDom, 'scrollTop', 300)
+    expect(wrapper.find('.is-vertical div').attributes('style')).toContain('height: 40%; transform: translateY(150%); webkit-transform: translateY(150%)')
+  })
+
+  test('horizontal', async () => {
+    const outterWidth = 200
+    const innerWidth = 500
+    const wrapper = _mount(`
+      <el-scrollbar style="height: 100px; width: ${outterWidth}px">
+        <div style="height:100px; width: ${innerWidth}px;"></div>
+      </el-scrollbar>
+`)
+    Object.defineProperties(window.HTMLElement.prototype, {
+      clientWidth: {
+        get () {
+          return outterWidth
+        },
+      },
+      scrollWidth:{
+        get () {
+          return innerWidth
+        },
+      },
+    })
+    const scrollDom = wrapper.find('.el-scrollbar__wrap').element
+    await makeScroll(scrollDom, 'scrollLeft', 100)
+    expect(wrapper.find('.is-horizontal div').attributes('style')).toContain('width: 40%; transform: translateX(50%); webkit-transform: translateX(50%)')
+    await makeScroll(scrollDom, 'scrollLeft', 300)
+    expect(wrapper.find('.is-horizontal div').attributes('style')).toContain('width: 40%; transform: translateX(150%); webkit-transform: translateX(150%)')
   })
 })