diff --git a/src/card/test/__snapshots__/index.legacy.js.snap b/src/card/test/__snapshots__/index.spec.js.snap
similarity index 50%
rename from src/card/test/__snapshots__/index.legacy.js.snap
rename to src/card/test/__snapshots__/index.spec.js.snap
index 04e9c3d58..7a91b2435 100644
--- a/src/card/test/__snapshots__/index.legacy.js.snap
+++ b/src/card/test/__snapshots__/index.spec.js.snap
@@ -1,71 +1,120 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`render bottom slot 1`] = `
-<div class="van-card">
-  <div class="van-card__header">
-    <div class="van-card__content">
-      <div></div>
-      <div class="van-card__bottom">Custom Bottom</div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`render origin-price slot 1`] = `
-<div class="van-card">
-  <div class="van-card__header">
-    <div class="van-card__content">
-      <div></div>
-      <div class="van-card__bottom">
-        <div class="van-card__origin-price">Custom Origin Price</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`render price & num slot 1`] = `
-<div class="van-card">
-  <div class="van-card__header">
-    <div class="van-card__content">
-      <div></div>
-      <div class="van-card__bottom">
-        <div class="van-card__price">Custom Price</div>
-        <div class="van-card__num">Custom Num</div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`render thumb & tag slot 1`] = `
+exports[`render thumb and tag slot correctly 1`] = `
 <div class="van-card">
   <div class="van-card__header"><a class="van-card__thumb">Custom Thumb<div class="van-card__tag">Custom Tag</div></a>
     <div class="van-card__content">
-      <div></div>
+      <div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <!---->
     </div>
   </div>
+  <!---->
 </div>
 `;
 
-exports[`render title & desc slot 1`] = `
+exports[`should render bottom slot correctly 1`] = `
 <div class="van-card">
   <div class="van-card__header">
+    <!---->
     <div class="van-card__content">
-      <div>Custom TitleCustom desc</div>
+      <div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <div class="van-card__bottom">
+        <!---->
+        <!---->
+        <!---->
+        <!---->Custom Bottom</div>
     </div>
   </div>
+  <!---->
 </div>
 `;
 
-exports[`render price & price-top slot 1`] = `
+exports[`should render origin-price slot correctly 1`] = `
 <div class="van-card">
   <div class="van-card__header">
+    <!---->
     <div class="van-card__content">
-      <div></div>
-      <div class="van-card__bottom">Custom Price-top<div class="van-card__price">Custom Price</div>
+      <div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <div class="van-card__bottom">
+        <!---->
+        <!---->
+        <div class="van-card__origin-price">Custom Origin Price</div>
+        <!---->
+        <!---->
       </div>
     </div>
   </div>
+  <!---->
 </div>
-`;
\ No newline at end of file
+`;
+
+exports[`should render price and num slot correctly 1`] = `
+<div class="van-card">
+  <div class="van-card__header">
+    <!---->
+    <div class="van-card__content">
+      <div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <div class="van-card__bottom">
+        <!---->
+        <div class="van-card__price">Custom Price</div>
+        <!---->
+        <div class="van-card__num">Custom Num</div>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`should render price and price-top slot correctly 1`] = `
+<div class="van-card">
+  <div class="van-card__header">
+    <!---->
+    <div class="van-card__content">
+      <div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+      <div class="van-card__bottom">Custom Price-top<div class="van-card__price">Custom Price</div>
+        <!---->
+        <!---->
+        <!---->
+      </div>
+    </div>
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`should render title and desc slot correctly 1`] = `
+<div class="van-card">
+  <div class="van-card__header">
+    <!---->
+    <div class="van-card__content">
+      <div>Custom TitleCustom desc
+        <!---->
+      </div>
+      <!---->
+    </div>
+  </div>
+  <!---->
+</div>
+`;
diff --git a/src/card/test/index.legacy.js b/src/card/test/index.spec.js
similarity index 64%
rename from src/card/test/index.legacy.js
rename to src/card/test/index.spec.js
index efade2d6f..2d3dc2514 100644
--- a/src/card/test/index.legacy.js
+++ b/src/card/test/index.spec.js
@@ -1,48 +1,29 @@
 import Card from '..';
 import { mount } from '@vue/test-utils';
 
-test('click event', () => {
+test('should emit click event after clicked', () => {
   const onClick = jest.fn();
   const wrapper = mount(Card, {
-    context: {
-      on: {
-        click: onClick,
-      },
+    props: {
+      onClick,
     },
   });
-
   wrapper.trigger('click');
-
-  expect(onClick).toHaveBeenCalledWith(
-    expect.objectContaining({
-      isTrusted: expect.any(Boolean),
-    })
-  );
+  expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-test('click-thumb event', () => {
-  const onClickThumb = jest.fn();
+test('should emit click-thumb event after clicking thumb', () => {
   const wrapper = mount(Card, {
     props: {
       thumb: 'xx',
     },
-    context: {
-      on: {
-        'click-thumb': onClickThumb,
-      },
-    },
   });
 
   wrapper.find('.van-card__thumb').trigger('click');
-
-  expect(onClickThumb).toHaveBeenCalledWith(
-    expect.objectContaining({
-      isTrusted: expect.any(Boolean),
-    })
-  );
+  expect(wrapper.emitted('click-thumb').length).toEqual(1);
 });
 
-test('render price & num slot', () => {
+test('should render price and num slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       num: () => 'Custom Num',
@@ -53,7 +34,7 @@ test('render price & num slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render origin-price slot', () => {
+test('should render origin-price slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       'origin-price': () => 'Custom Origin Price',
@@ -63,7 +44,7 @@ test('render origin-price slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render bottom slot', () => {
+test('should render bottom slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       bottom: () => 'Custom Bottom',
@@ -73,7 +54,7 @@ test('render bottom slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render thumb & tag slot', () => {
+test('render thumb and tag slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       tag: () => 'Custom Tag',
@@ -84,7 +65,7 @@ test('render thumb & tag slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render title & desc slot', () => {
+test('should render title and desc slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       title: () => 'Custom Title',
@@ -95,7 +76,7 @@ test('render title & desc slot', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('render price & price-top slot', () => {
+test('should render price and price-top slot correctly', () => {
   const wrapper = mount(Card, {
     slots: {
       price: () => 'Custom Price',