diff --git a/src/notice-bar/test/__snapshots__/index.legacy.js.snap b/src/notice-bar/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 97f9e8e95..000000000
--- a/src/notice-bar/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`icon slot 1`] = `
-<div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
-    <div class="van-notice-bar__content" style="transition-duration: 0s;">
-      Content
-    </div>
-  </div>Custom Right Icon</div>
-`;
-
-exports[`should not scroll when content width > wrap width  1`] = `
-<div role="alert" class="van-notice-bar">
-  <div role="marquee" class="van-notice-bar__wrap">
-    <div class="van-notice-bar__content" style="transition-duration: 0s;">foo</div>
-  </div>
-</div>
-`;
-
-exports[`should scroll when content width > wrap width  1`] = `
-<div role="alert" class="van-notice-bar">
-  <div role="marquee" class="van-notice-bar__wrap">
-    <div class="van-notice-bar__content" style="transition-duration: 2s; transform: translateX(-100px);">foo</div>
-  </div>
-</div>
-`;
diff --git a/src/notice-bar/test/__snapshots__/index.spec.js.snap b/src/notice-bar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..2166d93ad
--- /dev/null
+++ b/src/notice-bar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not start scrolling when content width > wrap width  1`] = `
+<div role="alert"
+     class="van-notice-bar"
+>
+  <div role="marquee"
+       class="van-notice-bar__wrap"
+  >
+    <div style="transition-duration: 0s;"
+         class="van-notice-bar__content"
+    >
+      foo
+    </div>
+  </div>
+</div>
+`;
+
+exports[`should render icon slot correct 1`] = `
+<div role="alert"
+     class="van-notice-bar"
+>
+  Custom Left Icon
+  <div role="marquee"
+       class="van-notice-bar__wrap"
+  >
+    <div style="transition-duration: 0s;"
+         class="van-notice-bar__content"
+    >
+      Content
+    </div>
+  </div>
+  Custom Right Icon
+</div>
+`;
+
+exports[`should start scrolling when content width > wrap width  1`] = `
+<div role="alert"
+     class="van-notice-bar"
+>
+  <div role="marquee"
+       class="van-notice-bar__wrap"
+  >
+    <div style="transition-duration: 2s; transform: translateX(-100px);"
+         class="van-notice-bar__content"
+    >
+      foo
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/notice-bar/test/index.legacy.js b/src/notice-bar/test/index.spec.js
similarity index 70%
rename from src/notice-bar/test/index.legacy.js
rename to src/notice-bar/test/index.spec.js
index 1ade0954b..6cf588df7 100644
--- a/src/notice-bar/test/index.legacy.js
+++ b/src/notice-bar/test/index.spec.js
@@ -1,14 +1,7 @@
 import NoticeBar from '..';
 import { mount, later } from '../../../test';
 
-test('click event', () => {
-  const wrapper = mount(NoticeBar);
-
-  wrapper.trigger('click');
-  expect(wrapper.emitted('click')[0][0]).toBeTruthy();
-});
-
-test('close event', () => {
+test('should emit close event when close icon is clicked', () => {
   const wrapper = mount(NoticeBar, {
     props: {
       mode: 'closeable',
@@ -20,24 +13,24 @@ test('close event', () => {
   expect(wrapper.emitted('close')[0][0]).toBeTruthy();
 });
 
-test('icon slot', () => {
+test('should render icon slot correct', () => {
   const wrapper = mount({
-    template: `
-      <notice-bar>
+    render: () => (
+      <NoticeBar
+        v-slots={{
+          'left-icon': () => 'Custom Left Icon',
+          'right-icon': () => 'Custom Right Icon',
+        }}
+      >
         Content
-        <template v-slot:left-icon>Custom Left Icon</template>
-        <template v-slot:right-icon>Custom Right Icon</template>
-      </notice-bar>
-    `,
-    components: {
-      NoticeBar,
-    },
+      </NoticeBar>
+    ),
   });
 
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('replay event', async () => {
+test('should emit replay event after replay', async () => {
   const wrapper = mount(NoticeBar, {
     props: {
       text: 'foo',
@@ -49,7 +42,7 @@ test('replay event', async () => {
   expect(wrapper.emitted('replay')).toBeTruthy();
 });
 
-test('should scroll when content width > wrap width ', async () => {
+test('should start scrolling when content width > wrap width ', async () => {
   const wrapper = mount(NoticeBar, {
     props: {
       text: 'foo',
@@ -72,7 +65,7 @@ test('should scroll when content width > wrap width ', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should not scroll when content width > wrap width ', async () => {
+test('should not start scrolling when content width > wrap width ', async () => {
   const wrapper = mount(NoticeBar, {
     props: {
       text: 'foo',