diff --git a/src/badge/test/__snapshots__/demo.spec.js.snap b/src/badge/test/__snapshots__/demo.spec.js.snap
new file mode 100644
index 000000000..36c20cfe3
--- /dev/null
+++ b/src/badge/test/__snapshots__/demo.spec.js.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--fixed">5</div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--dot van-badge--fixed">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--fixed">9+</div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--fixed">99+</div>
+  </div>
+</div>
+<div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--fixed" style="background: rgb(25, 137, 250);">5</div>
+  </div>
+  <div class="van-badge__wrapper">
+    <div class="child"></div>
+    <div class="van-badge van-badge--dot van-badge--fixed" style="background: rgb(25, 137, 250);">
+      <!---->
+    </div>
+  </div>
+</div>
+<div>
+  <div class="van-badge" style="margin-left: 16px;">99+</div>
+</div>
+`;
diff --git a/src/badge/test/__snapshots__/index.legacy.js.snap b/src/badge/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index f1dda6f62..000000000
--- a/src/badge/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should not render when badge is empty string 1`] = ``;
-
-exports[`should not render when badge is empty undefined 1`] = ``;
-
-exports[`should render when badge is zero 1`] = `<div class="van-badge">0</div>`;
diff --git a/src/badge/test/__snapshots__/index.spec.js.snap b/src/badge/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..e34132b4b
--- /dev/null
+++ b/src/badge/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render content slot and match snapshot 1`] = `<div class="van-badge">Custom Content</div>`;
+
+exports[`should render nothing when badge is empty string 1`] = `<!---->`;
+
+exports[`should render nothing when badge is undefined 1`] = `<!---->`;
+
+exports[`should render nothing when badge is zero 1`] = `<!---->`;
diff --git a/src/badge/test/demo.spec.js b/src/badge/test/demo.spec.js
new file mode 100644
index 000000000..5c70922b5
--- /dev/null
+++ b/src/badge/test/demo.spec.js
@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);
diff --git a/src/badge/test/index.legacy.js b/src/badge/test/index.spec.js
similarity index 53%
rename from src/badge/test/index.legacy.js
rename to src/badge/test/index.spec.js
index c40e80da3..371a11c00 100644
--- a/src/badge/test/index.legacy.js
+++ b/src/badge/test/index.spec.js
@@ -1,7 +1,7 @@
 import Badge from '..';
 import { mount } from '@vue/test-utils';
 
-test('should not render when badge is empty string', () => {
+test('should render nothing when badge is empty string', () => {
   const wrapper = mount(Badge, {
     propsData: {
       badge: '',
@@ -11,7 +11,7 @@ test('should not render when badge is empty string', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should not render when badge is empty undefined', () => {
+test('should render nothing when badge is undefined', () => {
   const wrapper = mount(Badge, {
     propsData: {
       badge: undefined,
@@ -21,7 +21,7 @@ test('should not render when badge is empty undefined', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should render when badge is zero', () => {
+test('should render nothing when badge is zero', () => {
   const wrapper = mount(Badge, {
     propsData: {
       badge: 0,
@@ -30,3 +30,13 @@ test('should render when badge is zero', () => {
 
   expect(wrapper.html()).toMatchSnapshot();
 });
+
+test('should render content slot and match snapshot', () => {
+  const wrapper = mount(Badge, {
+    slots: {
+      content: () => 'Custom Content',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});