diff --git a/example/app.json b/example/app.json
index f10d1c23..de7e94ab 100644
--- a/example/app.json
+++ b/example/app.json
@@ -144,6 +144,7 @@
"van-dropdown-menu": "./dist/dropdown-menu/index",
"van-dropdown-item": "./dist/dropdown-item/index",
"van-skeleton": "./dist/skeleton/index",
+ "van-skeleton-demo": "./dist/skeleton/demo/index",
"van-calendar": "./dist/calendar/index",
"van-share-sheet": "./dist/share-sheet/index",
"van-config-provider": "./dist/config-provider/index",
diff --git a/example/pages/skeleton/index.js b/example/pages/skeleton/index.js
index 0033306d..cc11dfda 100644
--- a/example/pages/skeleton/index.js
+++ b/example/pages/skeleton/index.js
@@ -1,11 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- show: false
- },
-
- onChange({ detail }) {
- this.setData({ show: detail });
- },
-});
+Page();
diff --git a/example/pages/skeleton/index.wxml b/example/pages/skeleton/index.wxml
index c3088cf8..c84e5ec3 100644
--- a/example/pages/skeleton/index.wxml
+++ b/example/pages/skeleton/index.wxml
@@ -1,37 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 关于 Vant Weapp
- Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
-
-
-
-
+
diff --git a/packages/skeleton/demo/index.json b/packages/skeleton/demo/index.json
new file mode 100644
index 00000000..bea523e8
--- /dev/null
+++ b/packages/skeleton/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-switch": "../../switch/index",
+ "van-skeleton": "../../skeleton/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/skeleton/index.wxss b/packages/skeleton/demo/index.less
similarity index 91%
rename from example/pages/skeleton/index.wxss
rename to packages/skeleton/demo/index.less
index 24fb7cfd..6083d80b 100644
--- a/example/pages/skeleton/index.wxss
+++ b/packages/skeleton/demo/index.less
@@ -1,7 +1,3 @@
-page {
- background-color: white;
-}
-
.van-switch {
margin: 0 16px 8px;
}
diff --git a/packages/skeleton/demo/index.ts b/packages/skeleton/demo/index.ts
new file mode 100644
index 00000000..2ee2618e
--- /dev/null
+++ b/packages/skeleton/demo/index.ts
@@ -0,0 +1,13 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ show: false,
+ },
+
+ methods: {
+ onChange({ detail }) {
+ this.setData({ show: detail });
+ },
+ },
+});
diff --git a/packages/skeleton/demo/index.wxml b/packages/skeleton/demo/index.wxml
new file mode 100644
index 00000000..c3088cf8
--- /dev/null
+++ b/packages/skeleton/demo/index.wxml
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 关于 Vant Weapp
+ Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
+
+
+
+
diff --git a/packages/skeleton/test/__snapshots__/demo.spec.ts.snap b/packages/skeleton/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..6a5d30a4
--- /dev/null
+++ b/packages/skeleton/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 显示头像
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 展示子组件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/skeleton/test/demo.spec.ts b/packages/skeleton/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/skeleton/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();
+});