diff --git a/example/app.json b/example/app.json
index 3813fe43..bab31741 100644
--- a/example/app.json
+++ b/example/app.json
@@ -70,6 +70,7 @@
     "van-button": "./dist/button/index",
     "van-button-demo": "./dist/button/demo/index",
     "van-card": "./dist/card/index",
+    "van-card-demo": "./dist/card/demo/index",
     "van-cell": "./dist/cell/index",
     "van-cell-group": "./dist/cell-group/index",
     "van-checkbox": "./dist/checkbox/index",
diff --git a/example/pages/card/index.js b/example/pages/card/index.js
index bcbac713..cc11dfda 100644
--- a/example/pages/card/index.js
+++ b/example/pages/card/index.js
@@ -1,7 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    imageURL: 'https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg'
-  }
-});
+Page();
diff --git a/example/pages/card/index.wxml b/example/pages/card/index.wxml
index 0bc3b7ec..b3be7bb6 100644
--- a/example/pages/card/index.wxml
+++ b/example/pages/card/index.wxml
@@ -1,32 +1 @@
-<view class="container">
-  <demo-block title="基础用法">
-    <van-card
-      num="2"
-      price="2.00"
-      desc="描述信息"
-      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
-      thumb="{{ imageURL }}"
-    />
-  </demo-block>
-
-  <demo-block title="高级用法">
-    <van-card
-      num="2"
-      tag="标签"
-      price="2.00"
-      origin-price="10.00"
-      desc="描述信息"
-      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
-      thumb="{{ imageURL }}"
-    >
-      <view slot="tags">
-        <van-tag plain type="danger" custom-class="tag">标签1</van-tag>
-        <van-tag plain type="danger">标签2</van-tag>
-      </view>
-      <view slot="footer" class="van-card__footer">
-        <van-button size="mini" round custom-class="button">按钮</van-button>
-        <van-button size="mini" round>按钮</van-button>
-      </view>
-    </van-card>
-  </demo-block>
-</view>
+<van-card-demo />
diff --git a/packages/card/demo/index.json b/packages/card/demo/index.json
new file mode 100644
index 00000000..d22c0b5c
--- /dev/null
+++ b/packages/card/demo/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-card": "../../card/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/card/index.wxss b/packages/card/demo/index.less
similarity index 100%
rename from example/pages/card/index.wxss
rename to packages/card/demo/index.less
diff --git a/packages/card/demo/index.ts b/packages/card/demo/index.ts
new file mode 100644
index 00000000..05abaf53
--- /dev/null
+++ b/packages/card/demo/index.ts
@@ -0,0 +1,8 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    imageURL:
+      'https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg',
+  },
+});
diff --git a/packages/card/demo/index.wxml b/packages/card/demo/index.wxml
new file mode 100644
index 00000000..0bc3b7ec
--- /dev/null
+++ b/packages/card/demo/index.wxml
@@ -0,0 +1,32 @@
+<view class="container">
+  <demo-block title="基础用法">
+    <van-card
+      num="2"
+      price="2.00"
+      desc="描述信息"
+      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
+      thumb="{{ imageURL }}"
+    />
+  </demo-block>
+
+  <demo-block title="高级用法">
+    <van-card
+      num="2"
+      tag="标签"
+      price="2.00"
+      origin-price="10.00"
+      desc="描述信息"
+      title="2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男"
+      thumb="{{ imageURL }}"
+    >
+      <view slot="tags">
+        <van-tag plain type="danger" custom-class="tag">标签1</van-tag>
+        <van-tag plain type="danger">标签2</van-tag>
+      </view>
+      <view slot="footer" class="van-card__footer">
+        <van-button size="mini" round custom-class="button">按钮</van-button>
+        <van-button size="mini" round>按钮</van-button>
+      </view>
+    </van-card>
+  </demo-block>
+</view>
diff --git a/packages/card/test/__snapshots__/demo.spec.ts.snap b/packages/card/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..7b320cd9
--- /dev/null
+++ b/packages/card/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,217 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <wx-view
+    class="container"
+  >
+    <demo-block>
+      <wx-view
+        class="custom-class demo-block van-clearfix "
+      >
+        <wx-view
+          class="demo-block__title"
+        >
+          基础用法
+        </wx-view>
+        <van-card>
+          <wx-view
+            class="custom-class van-card"
+          >
+            <wx-view
+              class="van-card__header"
+            >
+              <wx-view
+                class="van-card__thumb"
+                bind:tap="onClickThumb"
+              >
+                <wx-image
+                  class="van-card__img thumb-class"
+                  lazyLoad="{{false}}"
+                  mode="aspectFit"
+                  src="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
+                />
+              </wx-view>
+              <wx-view
+                class="van-card__content van-card__content"
+              >
+                <wx-view>
+                  <wx-view
+                    class="van-card__title title-class"
+                  >
+                    2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
+                  </wx-view>
+                  <wx-view
+                    class="van-card__desc desc-class"
+                  >
+                    描述信息
+                  </wx-view>
+                </wx-view>
+                <wx-view
+                  class="van-card__bottom"
+                >
+                  <wx-view
+                    class="van-card__price price-class"
+                  >
+                    <wx-text>
+                      ¥
+                    </wx-text>
+                    <wx-text
+                      class="van-card__price-integer"
+                    >
+                      2
+                    </wx-text>
+                    <wx-text
+                      class="van-card__price-decimal"
+                    >
+                      .00
+                    </wx-text>
+                  </wx-view>
+                  <wx-view
+                    class="van-card__num num-class"
+                  >
+                    x 2
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-card__footer"
+            />
+          </wx-view>
+        </van-card>
+      </wx-view>
+    </demo-block>
+    <demo-block>
+      <wx-view
+        class="custom-class demo-block van-clearfix "
+      >
+        <wx-view
+          class="demo-block__title"
+        >
+          高级用法
+        </wx-view>
+        <van-card>
+          <wx-view
+            class="custom-class van-card"
+          >
+            <wx-view
+              class="van-card__header"
+            >
+              <wx-view
+                class="van-card__thumb"
+                bind:tap="onClickThumb"
+              >
+                <wx-image
+                  class="van-card__img thumb-class"
+                  lazyLoad="{{false}}"
+                  mode="aspectFit"
+                  src="https://img.yzcdn.cn/upload_files/2017/07/02/af5b9f44deaeb68000d7e4a711160c53.jpg"
+                />
+                <van-tag
+                  customClass="van-card__tag"
+                >
+                  <wx-view
+                    class="custom-class van-tag van-tag--danger van-tag--mark"
+                    style=""
+                  >
+                    
+        标签
+      
+                  </wx-view>
+                </van-tag>
+              </wx-view>
+              <wx-view
+                class="van-card__content van-card__content"
+              >
+                <wx-view>
+                  <wx-view
+                    class="van-card__title title-class"
+                  >
+                    2018秋冬新款男士休闲时尚军绿飞行夹克秋冬新款男
+                  </wx-view>
+                  <wx-view
+                    class="van-card__desc desc-class"
+                  >
+                    描述信息
+                  </wx-view>
+                  <wx-view
+                    slot="tags"
+                  >
+                    <van-tag
+                      customClass="tag"
+                      plain="{{true}}"
+                      type="danger"
+                    >
+                      标签1
+                    </van-tag>
+                    <van-tag
+                      plain="{{true}}"
+                      type="danger"
+                    >
+                      标签2
+                    </van-tag>
+                  </wx-view>
+                </wx-view>
+                <wx-view
+                  class="van-card__bottom"
+                >
+                  <wx-view
+                    class="van-card__price price-class"
+                  >
+                    <wx-text>
+                      ¥
+                    </wx-text>
+                    <wx-text
+                      class="van-card__price-integer"
+                    >
+                      2
+                    </wx-text>
+                    <wx-text
+                      class="van-card__price-decimal"
+                    >
+                      .00
+                    </wx-text>
+                  </wx-view>
+                  <wx-view
+                    class="van-card__origin-price origin-price-class"
+                  >
+                    ¥ 10.00
+                  </wx-view>
+                  <wx-view
+                    class="van-card__num num-class"
+                  >
+                    x 2
+                  </wx-view>
+                </wx-view>
+              </wx-view>
+            </wx-view>
+            <wx-view
+              class="van-card__footer"
+            >
+              <wx-view
+                class="van-card__footer"
+                slot="footer"
+              >
+                <van-button
+                  customClass="button"
+                  round="{{true}}"
+                  size="mini"
+                >
+                  按钮
+                </van-button>
+                <van-button
+                  round="{{true}}"
+                  size="mini"
+                >
+                  按钮
+                </van-button>
+              </wx-view>
+            </wx-view>
+          </wx-view>
+        </van-card>
+      </wx-view>
+    </demo-block>
+  </wx-view>
+</main>
+`;
diff --git a/packages/card/test/demo.spec.ts b/packages/card/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/card/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});