diff --git a/src/action-bar-icon/test/__snapshots__/index.spec.js.snap b/src/action-bar-icon/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f81cb1b2a
--- /dev/null
+++ b/src/action-bar-icon/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render default slot and match snapshot 1`] = `
+<div role="button" class="van-action-bar-icon" tabindex="0">
+  <div class="van-badge__wrapper van-icon van-icon-undefined van-action-bar-icon__icon">
+    <!---->
+    <!---->
+    <!---->
+  </div>Content
+</div>
+`;
+
+exports[`should render icon slot and match snapshot 1`] = `
+<div role="button" class="van-action-bar-icon" tabindex="0">
+  <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon
+    <!---->
+  </div>Content
+</div>
+`;
+
+exports[`should render icon slot with badge and match snapshot 1`] = `
+<div role="button" class="van-action-bar-icon" tabindex="0">
+  <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--fixed">1</div>
+  </div>Content
+</div>
+`;
+
+exports[`should render icon slot with dot and match snapshot 1`] = `
+<div role="button" class="van-action-bar-icon" tabindex="0">
+  <div class="van-badge__wrapper van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot van-badge--fixed">
+      <!---->
+    </div>
+  </div>Content
+</div>
+`;
diff --git a/src/action-bar-icon/test/index.spec.js b/src/action-bar-icon/test/index.spec.js
new file mode 100644
index 000000000..42360fa36
--- /dev/null
+++ b/src/action-bar-icon/test/index.spec.js
@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils';
+import ActionBarIcon from '..';
+
+test('should render default slot and match snapshot', () => {
+  const wrapper = mount(ActionBarIcon, {
+    slots: {
+      default: 'Content',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render icon slot and match snapshot', () => {
+  const wrapper = mount(ActionBarIcon, {
+    slots: {
+      default: 'Content',
+      icon: 'Custom Icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render icon slot with badge and match snapshot', () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      badge: '1',
+    },
+    slots: {
+      default: 'Content',
+      icon: 'Custom Icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render icon slot with dot and match snapshot', () => {
+  const wrapper = mount(ActionBarIcon, {
+    props: {
+      dot: true,
+    },
+    slots: {
+      default: 'Content',
+      icon: 'Custom Icon',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
diff --git a/src/action-bar/test/__snapshots__/index.legacy.js.snap b/src/action-bar/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index d83e14ad9..000000000
--- a/src/action-bar/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button render default slot 1`] = `
-<button class="van-button van-button--default van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--last">
-  <div class="van-button__content"><span class="van-button__text">Default Content</span></div>
-</button>
-`;
-
-exports[`Icon render default slot 1`] = `
-<div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-icon van-icon-undefined van-action-bar-icon__icon">
-    <!---->
-  </div>Default Content
-</div>
-`;
-
-exports[`Icon render icon slot 1`] = `
-<div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon
-    <!---->
-  </div>Text
-</div>
-`;
-
-exports[`Icon render icon slot with dot 1`] = `
-<div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot"></div>
-  </div>Text
-</div>
-`;
-
-exports[`Icon render icon slot with badge 1`] = `
-<div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge">1</div>
-  </div>Text
-</div>
-`;
-
-exports[`disable safe-area-inset-bottom prop 1`] = `<div class="van-action-bar van-action-bar--unfit"></div>`;
diff --git a/src/action-bar/test/__snapshots__/index.spec.js.snap b/src/action-bar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..8db696ffd
--- /dev/null
+++ b/src/action-bar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should allow to disable safe-area-inset-bottom prop 1`] = `
+<div class="van-action-bar van-action-bar--unfit">
+  <!---->
+</div>
+`;
diff --git a/src/action-bar/test/index.legacy.js b/src/action-bar/test/index.legacy.js
deleted file mode 100644
index b484f1b44..000000000
--- a/src/action-bar/test/index.legacy.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import ActionBar from '..';
-import Icon from '../../action-bar-icon';
-import { mount } from '../../../test';
-
-test('Icon click event', () => {
-  const wrapper = mount(Icon);
-  wrapper.trigger('click');
-  expect(wrapper.emitted('click').length).toEqual(1);
-});
-
-test('Icon render default slot', () => {
-  const wrapper = mount({
-    render(h) {
-      return h(Icon, null, ['Default Content']);
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('Icon render icon slot', () => {
-  const wrapper = mount({
-    render(h) {
-      return h(Icon, {
-        scopedSlots: {
-          default: () => 'Text',
-          icon: () => 'Custom Icon',
-        },
-      });
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('Icon render icon slot with badge', () => {
-  const wrapper = mount({
-    render(h) {
-      return h(Icon, {
-        props: {
-          badge: '1',
-        },
-        scopedSlots: {
-          default: () => 'Text',
-          icon: () => 'Custom Icon',
-        },
-      });
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('Icon render icon slot with dot', () => {
-  const wrapper = mount({
-    render(h) {
-      return h(Icon, {
-        props: {
-          dot: true,
-        },
-        scopedSlots: {
-          default: () => 'Text',
-          icon: () => 'Custom Icon',
-        },
-      });
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('disable safe-area-inset-bottom prop', () => {
-  const wrapper = mount(ActionBar, {
-    propsData: {
-      safeAreaInsetBottom: false,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/action-bar/test/index.spec.js b/src/action-bar/test/index.spec.js
new file mode 100644
index 000000000..f955f4c66
--- /dev/null
+++ b/src/action-bar/test/index.spec.js
@@ -0,0 +1,12 @@
+import ActionBar from '..';
+import { mount } from '../../../test';
+
+test('should allow to disable safe-area-inset-bottom prop', () => {
+  const wrapper = mount(ActionBar, {
+    propsData: {
+      safeAreaInsetBottom: false,
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});