diff --git a/example/app.json b/example/app.json
index e929f993..0656fb8a 100644
--- a/example/app.json
+++ b/example/app.json
@@ -128,6 +128,7 @@
"van-tree-select": "./dist/tree-select/index",
"van-datetime-picker": "./dist/datetime-picker/index",
"van-rate": "./dist/rate/index",
+ "van-rate-demo": "./dist/rate/demo/index",
"van-collapse": "./dist/collapse/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index",
diff --git a/example/pages/rate/index.js b/example/pages/rate/index.js
index 27dd601a..cc11dfda 100644
--- a/example/pages/rate/index.js
+++ b/example/pages/rate/index.js
@@ -1,18 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-Page({
- data: {
- value1: 3,
- value2: 3,
- value3: 3,
- value4: 2.5,
- value5: 4,
- value6: 3,
- value8: 2,
- },
-
- onChange(event) {
- Toast('当前值：' + event.detail);
- },
-});
+Page();
diff --git a/example/pages/rate/index.wxml b/example/pages/rate/index.wxml
index 03a45ae0..83af809d 100644
--- a/example/pages/rate/index.wxml
+++ b/example/pages/rate/index.wxml
@@ -1,70 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/rate/index.wxss b/example/pages/rate/index.wxss
index 39126599..e69de29b 100644
--- a/example/pages/rate/index.wxss
+++ b/example/pages/rate/index.wxss
@@ -1,7 +0,0 @@
-page {
- background-color: #fff;
-}
-
-.rate-position {
- margin-left: 15px;
-}
diff --git a/packages/rate/demo/index.json b/packages/rate/demo/index.json
new file mode 100644
index 00000000..5e8b209f
--- /dev/null
+++ b/packages/rate/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-rate": "../../rate/index",
+ "van-toast": "../../toast/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/rate/demo/index.less b/packages/rate/demo/index.less
new file mode 100644
index 00000000..ef26581f
--- /dev/null
+++ b/packages/rate/demo/index.less
@@ -0,0 +1,3 @@
+.rate-position {
+ margin-left: 15px;
+}
diff --git a/packages/rate/demo/index.ts b/packages/rate/demo/index.ts
new file mode 100644
index 00000000..2630dde4
--- /dev/null
+++ b/packages/rate/demo/index.ts
@@ -0,0 +1,23 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+ data: {
+ value1: 3,
+ value2: 3,
+ value3: 3,
+ value4: 2.5,
+ value5: 4,
+ value6: 3,
+ value8: 2,
+ },
+
+ methods: {
+ onChange(event) {
+ Toast({
+ context: this,
+ message: '当前值：' + event.detail,
+ });
+ },
+ },
+});
diff --git a/packages/rate/demo/index.wxml b/packages/rate/demo/index.wxml
new file mode 100644
index 00000000..03a45ae0
--- /dev/null
+++ b/packages/rate/demo/index.wxml
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/rate/test/__snapshots__/demo.spec.ts.snap b/packages/rate/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..8a3e4778
--- /dev/null
+++ b/packages/rate/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,977 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义样式
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 半星
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义数量
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 禁用状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 只读状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 监听 change 事件
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/rate/test/demo.spec.ts b/packages/rate/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/rate/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();
+});