diff --git a/example/app.json b/example/app.json
index e0e49d53..c12edc94 100644
--- a/example/app.json
+++ b/example/app.json
@@ -101,6 +101,7 @@
     "van-notice-bar": "./dist/notice-bar/index",
     "van-notify": "./dist/notify/index",
     "van-panel": "./dist/panel/index",
+    "van-panel-demo": "./dist/panel/demo/index",
     "van-popup": "./dist/popup/index",
     "van-progress": "./dist/progress/index",
     "van-radio": "./dist/radio/index",
diff --git a/example/pages/panel/index.wxml b/example/pages/panel/index.wxml
index 3d9961fe..2e681cf0 100644
--- a/example/pages/panel/index.wxml
+++ b/example/pages/panel/index.wxml
@@ -1,15 +1 @@
-<demo-block title="基础用法">
-  <van-panel title="标题" desc="描述信息" status="状态">
-    <view class="content">内容</view>
-  </van-panel>
-</demo-block>
-
-<demo-block title="高级用法">
-  <van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
-    <view class="content">内容</view>
-    <view slot="footer" class="footer">
-      <van-button size="small" class="demo-margin-right">按钮</van-button>
-      <van-button size="small" type="danger">按钮</van-button>
-    </view>
-  </van-panel>
-</demo-block>
+<van-panel-demo />
diff --git a/packages/panel/demo/index.json b/packages/panel/demo/index.json
new file mode 100644
index 00000000..3cbf5749
--- /dev/null
+++ b/packages/panel/demo/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-panel": "../../panel/index",
+    "van-button": "../../button/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/panel/index.wxss b/packages/panel/demo/index.less
similarity index 100%
rename from example/pages/panel/index.wxss
rename to packages/panel/demo/index.less
diff --git a/packages/panel/demo/index.ts b/packages/panel/demo/index.ts
new file mode 100644
index 00000000..a32755a5
--- /dev/null
+++ b/packages/panel/demo/index.ts
@@ -0,0 +1,5 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {},
+});
diff --git a/packages/panel/demo/index.wxml b/packages/panel/demo/index.wxml
new file mode 100644
index 00000000..3d9961fe
--- /dev/null
+++ b/packages/panel/demo/index.wxml
@@ -0,0 +1,15 @@
+<demo-block title="基础用法">
+  <van-panel title="标题" desc="描述信息" status="状态">
+    <view class="content">内容</view>
+  </van-panel>
+</demo-block>
+
+<demo-block title="高级用法">
+  <van-panel title="标题" desc="描述信息" status="状态" use-footer-slot>
+    <view class="content">内容</view>
+    <view slot="footer" class="footer">
+      <van-button size="small" class="demo-margin-right">按钮</van-button>
+      <van-button size="small" type="danger">按钮</van-button>
+    </view>
+  </van-panel>
+</demo-block>
diff --git a/packages/panel/test/__snapshots__/demo.spec.ts.snap b/packages/panel/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..d799c3ac
--- /dev/null
+++ b/packages/panel/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        基础用法
+      </wx-view>
+      <van-panel>
+        <wx-view
+          class="van-panel van-hairline--top-bottom custom-class"
+        >
+          <van-cell
+            customClass="header-class"
+            valueClass="van-panel__header-value"
+          >
+            <wx-view
+              class="custom-class van-cell"
+              hoverClass="van-cell--hover hover-class"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="van-cell__title title-class"
+                style=""
+              >
+                标题
+                <wx-view
+                  class="van-cell__label label-class"
+                >
+                  描述信息
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="van-cell__value value-class"
+              >
+                状态
+              </wx-view>
+            </wx-view>
+          </van-cell>
+          <wx-view
+            class="van-panel__content"
+          >
+            <wx-view
+              class="content"
+            >
+              内容
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-panel__footer van-hairline--top footer-class"
+          />
+        </wx-view>
+      </van-panel>
+    </wx-view>
+  </demo-block>
+  <demo-block>
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        高级用法
+      </wx-view>
+      <van-panel
+        useFooterSlot="{{true}}"
+      >
+        <wx-view
+          class="van-panel van-hairline--top-bottom custom-class"
+        >
+          <van-cell
+            customClass="header-class"
+            valueClass="van-panel__header-value"
+          >
+            <wx-view
+              class="custom-class van-cell"
+              hoverClass="van-cell--hover hover-class"
+              hoverStayTime="70"
+              style=""
+              bind:tap="onClick"
+            >
+              <wx-view
+                class="van-cell__title title-class"
+                style=""
+              >
+                标题
+                <wx-view
+                  class="van-cell__label label-class"
+                >
+                  描述信息
+                </wx-view>
+              </wx-view>
+              <wx-view
+                class="van-cell__value value-class"
+              >
+                状态
+              </wx-view>
+            </wx-view>
+          </van-cell>
+          <wx-view
+            class="van-panel__content"
+          >
+            <wx-view
+              class="content"
+            >
+              内容
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-panel__footer van-hairline--top footer-class"
+          >
+            <wx-view
+              class="footer"
+              slot="footer"
+            >
+              <van-button
+                class="demo-margin-right"
+              >
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  businessId="{{0}}"
+                  class="custom-class van-button van-button--default van-button--small "
+                  data-detail="{{null}}"
+                  formType=""
+                  hoverClass="van-button--active hover-class"
+                  id=""
+                  lang=""
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:contact="onContact"
+                  bind:error="onError"
+                  bind:getphonenumber="onGetPhoneNumber"
+                  bind:getuserinfo="onGetUserInfo"
+                  bind:launchapp="onLaunchApp"
+                  bind:opensetting="onOpenSetting"
+                  bind:tap="onClick"
+                >
+                  <wx-view
+                    class="van-button__text"
+                  >
+                    按钮
+                  </wx-view>
+                </wx-button>
+              </van-button>
+              <van-button>
+                <wx-button
+                  appParameter=""
+                  ariaLabel=""
+                  businessId="{{0}}"
+                  class="custom-class van-button van-button--danger van-button--small "
+                  data-detail="{{null}}"
+                  formType=""
+                  hoverClass="van-button--active hover-class"
+                  id=""
+                  lang=""
+                  openType=""
+                  sendMessageImg=""
+                  sendMessagePath=""
+                  sendMessageTitle=""
+                  sessionFrom=""
+                  showMessageCard="{{false}}"
+                  style=""
+                  bind:contact="onContact"
+                  bind:error="onError"
+                  bind:getphonenumber="onGetPhoneNumber"
+                  bind:getuserinfo="onGetUserInfo"
+                  bind:launchapp="onLaunchApp"
+                  bind:opensetting="onOpenSetting"
+                  bind:tap="onClick"
+                >
+                  <wx-view
+                    class="van-button__text"
+                  >
+                    按钮
+                  </wx-view>
+                </wx-button>
+              </van-button>
+            </wx-view>
+          </wx-view>
+        </wx-view>
+      </van-panel>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/panel/test/demo.spec.ts b/packages/panel/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/panel/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();
+});