diff --git a/example/app.json b/example/app.json
index 8c8c1e8c..b3ccf8e1 100644
--- a/example/app.json
+++ b/example/app.json
@@ -167,6 +167,7 @@
     "van-grid-demo": "./dist/grid/demo/index",
     "van-grid-item": "./dist/grid-item/index",
     "van-dropdown-menu": "./dist/dropdown-menu/index",
+    "van-dropdown-menu-demo": "./dist/dropdown-menu/demo/index",
     "van-dropdown-item": "./dist/dropdown-item/index",
     "van-skeleton": "./dist/skeleton/index",
     "van-skeleton-demo": "./dist/skeleton/demo/index",
diff --git a/example/pages/dropdown-menu/index.js b/example/pages/dropdown-menu/index.js
index 0e0a1399..cc11dfda 100644
--- a/example/pages/dropdown-menu/index.js
+++ b/example/pages/dropdown-menu/index.js
@@ -1,35 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    switchTitle1: '包邮',
-    switchTitle2: '团购',
-    itemTitle: '筛选',
-    option1: [
-      { text: '全部商品', value: 0 },
-      { text: '新款商品', value: 1 },
-      { text: '活动商品', value: 2 }
-    ],
-    option2: [
-      { text: '默认排序', value: 'a' },
-      { text: '好评排序', value: 'b' },
-      { text: '销量排序', value: 'c' }
-    ],
-    switch1: true,
-    switch2: false,
-    value1: 0,
-    value2: 'a'
-  },
-
-  onConfirm () {
-    this.selectComponent('#item').toggle();
-  },
-
-  onSwitch1Change ({ detail }) {
-    this.setData({ switch1: detail });
-  },
-
-  onSwitch2Change ({ detail }) {
-    this.setData({ switch2: detail });
-  }
-});
+Page();
diff --git a/example/pages/dropdown-menu/index.wxml b/example/pages/dropdown-menu/index.wxml
index c1dc606b..9f2813d0 100644
--- a/example/pages/dropdown-menu/index.wxml
+++ b/example/pages/dropdown-menu/index.wxml
@@ -1,61 +1 @@
-<demo-block custom-class="white" title="基础用法">
-	<van-dropdown-menu>
-		<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-		<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-	</van-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="自定义菜单内容">
-	<van-dropdown-menu>
-		<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-		<van-dropdown-item id="item" title="{{ itemTitle }}">
-			<van-cell title="{{ switchTitle1 }}">
-				<van-switch
-				 slot="right-icon"
-				 size="24px"
-				 style="height: 26px"
-				 checked="{{ switch1 }}"
-				 active-color="#ee0a24"
-				 bind:change="onSwitch1Change"
-				/>
-			</van-cell>
-			<van-cell title="{{ switchTitle2 }}">
-				<van-switch
-				 slot="right-icon"
-				 size="24px"
-				 style="height: 26px"
-				 checked="{{ switch2 }}"
-				 active-color="#ee0a24"
-				 bind:change="onSwitch2Change"
-				/>
-			</van-cell>
-			<view style="padding: 5px 16px;">
-				<van-button type="danger" block round bind:click="onConfirm">
-					确认
-				</van-button>
-			</view>
-		</van-dropdown-item>
-	</van-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="自定义选中状态颜色">
-	<van-dropdown-menu active-color="#1989fa">
-		<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-		<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-	</van-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="向上展开">
-	<van-dropdown-menu direction="up">
-		<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
-		<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
-	</van-dropdown-menu>
-</demo-block>
-
-<demo-block custom-class="white" title="禁用菜单">
-	<van-dropdown-menu>
-		<van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
-		<van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
-	</van-dropdown-menu>
-</demo-block>
-
+<van-dropdown-menu-demo />
diff --git a/example/pages/dropdown-menu/index.wxss b/example/pages/dropdown-menu/index.wxss
deleted file mode 100644
index 10df2838..00000000
--- a/example/pages/dropdown-menu/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-/** empty */
diff --git a/packages/dropdown-menu/demo/index.json b/packages/dropdown-menu/demo/index.json
new file mode 100644
index 00000000..9a432700
--- /dev/null
+++ b/packages/dropdown-menu/demo/index.json
@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-cell": "../../cell/index",
+    "van-switch": "../../switch/index",
+    "van-button": "../../button/index",
+    "van-dropdown-item": "../../dropdown-item/index",
+    "van-dropdown-menu": "../../dropdown-menu/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/packages/dropdown-menu/demo/index.ts b/packages/dropdown-menu/demo/index.ts
new file mode 100644
index 00000000..87bf1782
--- /dev/null
+++ b/packages/dropdown-menu/demo/index.ts
@@ -0,0 +1,37 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    switchTitle1: '包邮',
+    switchTitle2: '团购',
+    itemTitle: '筛选',
+    option1: [
+      { text: '全部商品', value: 0 },
+      { text: '新款商品', value: 1 },
+      { text: '活动商品', value: 2 },
+    ],
+    option2: [
+      { text: '默认排序', value: 'a' },
+      { text: '好评排序', value: 'b' },
+      { text: '销量排序', value: 'c' },
+    ],
+    switch1: true,
+    switch2: false,
+    value1: 0,
+    value2: 'a',
+  },
+
+  methods: {
+    onConfirm() {
+      this.selectComponent('#item').toggle();
+    },
+
+    onSwitch1Change({ detail }) {
+      this.setData({ switch1: detail });
+    },
+
+    onSwitch2Change({ detail }) {
+      this.setData({ switch2: detail });
+    },
+  },
+});
diff --git a/packages/dropdown-menu/demo/index.wxml b/packages/dropdown-menu/demo/index.wxml
new file mode 100644
index 00000000..a60cae2b
--- /dev/null
+++ b/packages/dropdown-menu/demo/index.wxml
@@ -0,0 +1,61 @@
+<demo-block custom-class="white" title="基础用法">
+  <van-dropdown-menu>
+    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+  </van-dropdown-menu>
+</demo-block>
+
+<demo-block custom-class="white" title="自定义菜单内容">
+  <van-dropdown-menu>
+    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+    <van-dropdown-item id="item" title="{{ itemTitle }}">
+      <van-cell title="{{ switchTitle1 }}">
+        <van-switch
+          slot="right-icon"
+          size="24px"
+          style="height: 26px"
+          checked="{{ switch1 }}"
+          active-color="#ee0a24"
+          bind:change="onSwitch1Change"
+        />
+      </van-cell>
+      <van-cell title="{{ switchTitle2 }}">
+        <van-switch
+          slot="right-icon"
+          size="24px"
+          style="height: 26px"
+          checked="{{ switch2 }}"
+          active-color="#ee0a24"
+          bind:change="onSwitch2Change"
+        />
+      </van-cell>
+      <view style="padding: 5px 16px;">
+        <van-button type="danger" block round bind:click="onConfirm">
+          确认
+        </van-button>
+      </view>
+    </van-dropdown-item>
+  </van-dropdown-menu>
+</demo-block>
+
+<demo-block custom-class="white" title="自定义选中状态颜色">
+  <van-dropdown-menu active-color="#1989fa">
+    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+  </van-dropdown-menu>
+</demo-block>
+
+<demo-block custom-class="white" title="向上展开">
+  <van-dropdown-menu direction="up">
+    <van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+    <van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+  </van-dropdown-menu>
+</demo-block>
+
+<demo-block custom-class="white" title="禁用菜单">
+  <van-dropdown-menu>
+    <van-dropdown-item value="{{ value1 }}" disabled options="{{ option1 }}" />
+    <van-dropdown-item value="{{ value2 }}" disabled options="{{ option2 }}" />
+  </van-dropdown-menu>
+</demo-block>
+
diff --git a/packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap b/packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..3836157f
--- /dev/null
+++ b/packages/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,293 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+  <demo-block
+    customClass="white"
+  >
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        基础用法
+      </wx-view>
+      <van-dropdown-menu>
+        <wx-view
+          class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
+        >
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{0}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        全部商品
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{1}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        默认排序
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <van-dropdown-item />
+          <van-dropdown-item />
+        </wx-view>
+      </van-dropdown-menu>
+    </wx-view>
+  </demo-block>
+  <demo-block
+    customClass="white"
+  >
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义菜单内容
+      </wx-view>
+      <van-dropdown-menu>
+        <wx-view
+          class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
+        >
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{0}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        全部商品
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{1}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        筛选
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <van-dropdown-item />
+          <van-dropdown-item
+            id="item"
+          />
+        </wx-view>
+      </van-dropdown-menu>
+    </wx-view>
+  </demo-block>
+  <demo-block
+    customClass="white"
+  >
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        自定义选中状态颜色
+      </wx-view>
+      <van-dropdown-menu>
+        <wx-view
+          class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
+        >
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{0}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        全部商品
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{1}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        默认排序
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <van-dropdown-item />
+          <van-dropdown-item />
+        </wx-view>
+      </van-dropdown-menu>
+    </wx-view>
+  </demo-block>
+  <demo-block
+    customClass="white"
+  >
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        向上展开
+      </wx-view>
+      <van-dropdown-menu>
+        <wx-view
+          class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
+        >
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{0}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title van-dropdown-menu__title--down"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        全部商品
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-dropdown-menu__item"
+            data-index="{{1}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title van-dropdown-menu__title--down"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        默认排序
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <van-dropdown-item />
+          <van-dropdown-item />
+        </wx-view>
+      </van-dropdown-menu>
+    </wx-view>
+  </demo-block>
+  <demo-block
+    customClass="white"
+  >
+    <wx-view
+      class="custom-class demo-block van-clearfix "
+    >
+      <wx-view
+        class="demo-block__title"
+      >
+        禁用菜单
+      </wx-view>
+      <van-dropdown-menu>
+        <wx-view
+          class="van-dropdown-menu van-dropdown-menu--top-bottom custom-class"
+        >
+          <wx-view
+            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
+            data-index="{{0}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        全部商品
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <wx-view
+            class="van-dropdown-menu__item van-dropdown-menu__item--disabled"
+            data-index="{{1}}"
+            bind:tap="onTitleTap"
+          >
+            <wx-view
+              class=" van-dropdown-menu__title"
+              style=""
+            >
+              <wx-view
+                class="van-ellipsis"
+              >
+                
+        默认排序
+      
+              </wx-view>
+            </wx-view>
+          </wx-view>
+          <van-dropdown-item />
+          <van-dropdown-item />
+        </wx-view>
+      </van-dropdown-menu>
+    </wx-view>
+  </demo-block>
+</main>
+`;
diff --git a/packages/dropdown-menu/test/demo.spec.ts b/packages/dropdown-menu/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/dropdown-menu/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();
+});