diff --git a/example/app.json b/example/app.json
index fbfda951..e5e5e403 100644
--- a/example/app.json
+++ b/example/app.json
@@ -99,6 +99,7 @@
     "van-loading-demo": "./dist/loading/demo/index",
     "van-nav-bar": "./dist/nav-bar/index",
     "van-notice-bar": "./dist/notice-bar/index",
+    "van-notice-bar-demo": "./dist/notice-bar/demo/index",
     "van-notify": "./dist/notify/index",
     "van-notify-demo": "./dist/notify/demo/index",
     "van-panel": "./dist/panel/index",
diff --git a/example/pages/notice-bar/index.js b/example/pages/notice-bar/index.js
index a00afba2..cc11dfda 100644
--- a/example/pages/notice-bar/index.js
+++ b/example/pages/notice-bar/index.js
@@ -1,8 +1,3 @@
 import Page from '../../common/page';
 
-Page({
-  data: {
-    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
-    shortText: '技术是开发它的人的共同灵魂。',
-  },
-});
+Page();
diff --git a/example/pages/notice-bar/index.wxml b/example/pages/notice-bar/index.wxml
index 8e5028bc..d84e1d4f 100644
--- a/example/pages/notice-bar/index.wxml
+++ b/example/pages/notice-bar/index.wxml
@@ -1,30 +1 @@
-<demo-block title="基础用法">
-  <van-notice-bar
-    text="{{ text }}"
-    left-icon="volume-o"
-  />
-</demo-block>
-
-<demo-block title="滚动模式">
-  <van-notice-bar scrollable text="{{ shortText }}" custom-class="demo-margin-bottom" />
-  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" custom-class="demo-margin-bottom" />
-</demo-block>
-
-<demo-block title="多行展示">
-  <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
-</demo-block>
-
-<demo-block title="通知栏模式">
-  <van-notice-bar mode="closeable" text="{{ shortText }}" />
-  <van-notice-bar custom-class="margin-top" mode="link" text="{{ shortText }}" />
-</demo-block>
-
-<demo-block title="自定义样式">
-  <van-notice-bar
-    text="{{ shortText }}"
-    color="#1989fa"
-    background="#ecf9ff"
-    left-icon="info-o"
-  >
-  </van-notice-bar>
-</demo-block>
+<van-notice-bar-demo />
diff --git a/packages/notice-bar/demo/index.json b/packages/notice-bar/demo/index.json
new file mode 100644
index 00000000..a43d86d0
--- /dev/null
+++ b/packages/notice-bar/demo/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-notice-bar": "../../notice-bar/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}
diff --git a/example/pages/notice-bar/index.wxss b/packages/notice-bar/demo/index.less
similarity index 50%
rename from example/pages/notice-bar/index.wxss
rename to packages/notice-bar/demo/index.less
index 1308e481..5597003f 100644
--- a/example/pages/notice-bar/index.wxss
+++ b/packages/notice-bar/demo/index.less
@@ -1,4 +1,3 @@
-/* pages/notice-bar/index.wxss */
 .margin-top {
   margin-top: 4px;
 }
diff --git a/packages/notice-bar/demo/index.ts b/packages/notice-bar/demo/index.ts
new file mode 100644
index 00000000..a0555469
--- /dev/null
+++ b/packages/notice-bar/demo/index.ts
@@ -0,0 +1,8 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
+    shortText: '技术是开发它的人的共同灵魂。',
+  },
+});
diff --git a/packages/notice-bar/demo/index.wxml b/packages/notice-bar/demo/index.wxml
new file mode 100644
index 00000000..8e5028bc
--- /dev/null
+++ b/packages/notice-bar/demo/index.wxml
@@ -0,0 +1,30 @@
+<demo-block title="基础用法">
+  <van-notice-bar
+    text="{{ text }}"
+    left-icon="volume-o"
+  />
+</demo-block>
+
+<demo-block title="滚动模式">
+  <van-notice-bar scrollable text="{{ shortText }}" custom-class="demo-margin-bottom" />
+  <van-notice-bar scrollable="{{ false }}" text="{{ text }}" custom-class="demo-margin-bottom" />
+</demo-block>
+
+<demo-block title="多行展示">
+  <van-notice-bar wrapable scrollable="{{ false }}" text="{{ text }}" />
+</demo-block>
+
+<demo-block title="通知栏模式">
+  <van-notice-bar mode="closeable" text="{{ shortText }}" />
+  <van-notice-bar custom-class="margin-top" mode="link" text="{{ shortText }}" />
+</demo-block>
+
+<demo-block title="自定义样式">
+  <van-notice-bar
+    text="{{ shortText }}"
+    color="#1989fa"
+    background="#ecf9ff"
+    left-icon="info-o"
+  >
+  </van-notice-bar>
+</demo-block>
diff --git a/packages/notice-bar/test/demo.spec.ts b/packages/notice-bar/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/notice-bar/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();
+});