diff --git a/packages/rate/__tests__/rate.spec.ts b/packages/rate/__tests__/rate.spec.ts
index 22fc5635df..4ef4b00451 100644
--- a/packages/rate/__tests__/rate.spec.ts
+++ b/packages/rate/__tests__/rate.spec.ts
@@ -1,15 +1,67 @@
 import { mount } from '@vue/test-utils'
 import Rate from '../src/index.vue'
 
-const AXIOM = 'Rem is the best girl'
-
 describe('Rate.vue', () => {
-  test('render test', () => {
+  test('create', () => {
     const wrapper = mount(Rate, {
-      slots: {
-        default: AXIOM,
+      props: {
+        max: 10,
       },
     })
-    expect(wrapper.text()).toEqual(AXIOM)
+    const vm = wrapper.vm
+    const stars = vm.$el.querySelectorAll('.el-rate__item')
+    expect(stars.length).toEqual(10)
+  })
+
+  test('with texts', () => {
+    const vm = mount(Rate, {
+      props: {
+        showText: true,
+        modelValue: 4,
+        texts: ['1', '2', '3', '4', '5'],
+      },
+    }).vm
+
+    const text = vm.$el.querySelector('.el-rate__text')
+    expect(text.textContent).toEqual('4')
+  })
+
+  test('value change', async done => {
+    const wrapper = mount(Rate, {
+      props: {
+        modelValue: 0,
+      },
+    })
+    const vm = wrapper.vm
+    await wrapper.setProps({ modelValue: 3 })
+    expect(vm.modelValue).toEqual(3)
+    done()
+  })
+
+  test('click', () => {
+    const vm = mount({
+      template: `
+        <div>
+          <el-rate v-model="value1" />
+        </div>
+      `,
+      props:{},
+      data() {
+        return {
+          value1: 0,
+        }
+      },
+      components: {
+        'el-rate': Rate,
+      },
+    }, {
+      props: {
+      },
+    }).vm
+
+    const thirdStar = vm.$el.querySelectorAll('.el-rate__item')[2]
+
+    thirdStar.click()
+    expect(vm.value1).toEqual(3)
   })
 })
diff --git a/packages/rate/doc/basic.vue b/packages/rate/doc/basic.vue
index 746d8e2c15..a0d2ccc8f7 100644
--- a/packages/rate/doc/basic.vue
+++ b/packages/rate/doc/basic.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="block">
     <span class="demonstration">默认不区分颜色</span>
-    <el-rate v-model="value1" />
+    <el-rate v-model="value1" /> {{ value1 }}✨
   </div>
   <div class="block">
     <span class="demonstration">区分颜色</span>
@@ -10,6 +10,10 @@
       :colors="colors"
     />
   </div>
+  <el-rate
+    v-model="value"
+    show-text
+  />
 </template>
 
 <script lang="ts">