diff --git a/example/app.json b/example/app.json
index f90a52c6..480bc6c2 100644
--- a/example/app.json
+++ b/example/app.json
@@ -117,6 +117,7 @@
"van-search": "./dist/search/index",
"van-search-demo": "./dist/search/demo/index",
"van-sidebar": "./dist/sidebar/index",
+ "van-sidebar-demo": "./dist/sidebar/demo/index",
"van-sidebar-item": "./dist/sidebar-item/index",
"van-slider": "./dist/slider/index",
"van-slider-demo": "./dist/slider/demo/index",
diff --git a/example/pages/sidebar/index.js b/example/pages/sidebar/index.js
index 5ba0e5d6..cc11dfda 100644
--- a/example/pages/sidebar/index.js
+++ b/example/pages/sidebar/index.js
@@ -1,11 +1,3 @@
import Page from '../../common/page';
-import Notify from '../../dist/notify/notify';
-Page({
- onChange(event) {
- Notify({
- type: 'primary',
- message: `切换至第${event.detail}项`
- });
- }
-});
+Page();
diff --git a/example/pages/sidebar/index.wxml b/example/pages/sidebar/index.wxml
index fc193823..3316e8e8 100644
--- a/example/pages/sidebar/index.wxml
+++ b/example/pages/sidebar/index.wxml
@@ -1,39 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/sidebar/index.wxss b/example/pages/sidebar/index.wxss
index 5210c512..23062cc7 100644
--- a/example/pages/sidebar/index.wxss
+++ b/example/pages/sidebar/index.wxss
@@ -1,18 +1,3 @@
page {
background-color: #fff;
}
-
-.custom-sidebar {
- margin-left: 16px;
-}
-
-.demo-sidebar {
- background-color: #fff;
-}
-
-.demo-sidebar-title {
- margin-bottom: 16px;
- color: #969799;
- font-weight: normal;
- font-size: 14px;
-}
diff --git a/packages/sidebar/demo/index.json b/packages/sidebar/demo/index.json
new file mode 100644
index 00000000..3a56e6e2
--- /dev/null
+++ b/packages/sidebar/demo/index.json
@@ -0,0 +1,11 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-grid": "../../grid/index",
+ "van-grid-item": "../../grid-item/index",
+ "van-sidebar": "../../sidebar/index",
+ "van-sidebar-item": "../../sidebar-item/index",
+ "van-notify": "../../notify/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/sidebar/demo/index.less b/packages/sidebar/demo/index.less
new file mode 100644
index 00000000..68213ee3
--- /dev/null
+++ b/packages/sidebar/demo/index.less
@@ -0,0 +1,14 @@
+.custom-sidebar {
+ margin-left: 16px;
+}
+
+.demo-sidebar {
+ background-color: #fff;
+}
+
+.demo-sidebar-title {
+ margin-bottom: 16px;
+ color: #969799;
+ font-weight: normal;
+ font-size: 14px;
+}
diff --git a/packages/sidebar/demo/index.ts b/packages/sidebar/demo/index.ts
new file mode 100644
index 00000000..01bb1e67
--- /dev/null
+++ b/packages/sidebar/demo/index.ts
@@ -0,0 +1,14 @@
+import { VantComponent } from '../../common/component';
+import Notify from '../../notify/notify';
+
+VantComponent({
+ methods: {
+ onChange(event) {
+ Notify({
+ context: this,
+ type: 'primary',
+ message: `切换至第${event.detail}项`,
+ });
+ },
+ },
+});
diff --git a/packages/sidebar/demo/index.wxml b/packages/sidebar/demo/index.wxml
new file mode 100644
index 00000000..fc193823
--- /dev/null
+++ b/packages/sidebar/demo/index.wxml
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/sidebar/test/__snapshots__/demo.spec.ts.snap b/packages/sidebar/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..2c544740
--- /dev/null
+++ b/packages/sidebar/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,342 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/sidebar/test/demo.spec.ts b/packages/sidebar/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/sidebar/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();
+});