diff --git a/src/sidebar/test/__snapshots__/index.legacy.js.snap b/src/sidebar/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index d31a8a85e..000000000
--- a/src/sidebar/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`title slot 1`] = `
-<div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-    <div class="van-sidebar-item__text">Title Slot
-      <!---->
-    </div>
-  </a></div>
-`;
diff --git a/src/sidebar/test/__snapshots__/index.spec.js.snap b/src/sidebar/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..eec8e97bd
--- /dev/null
+++ b/src/sidebar/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render title slot correctly 1`] = `
+<div class="van-sidebar">
+  <a class="van-sidebar-item van-sidebar-item--select">
+    <div class="van-badge__wrapper van-sidebar-item__text">
+      Custom Title
+    </div>
+  </a>
+</div>
+`;
diff --git a/src/sidebar/test/index.legacy.js b/src/sidebar/test/index.legacy.js
deleted file mode 100644
index 2672397d3..000000000
--- a/src/sidebar/test/index.legacy.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Sidebar from '..';
-
-test('click event & change event', () => {
-  const onClick = jest.fn();
-  const onChange = jest.fn();
-  const wrapper = mount({
-    template: `
-      <van-sidebar @change="onChange">
-        <van-sidebar-item>Text</van-sidebar-item>
-        <van-sidebar-item @click="onClick">Text</van-sidebar-item>
-      </van-sidebar>
-    `,
-    methods: {
-      onClick,
-      onChange,
-    },
-  });
-
-  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
-  expect(onClick).toHaveBeenCalledWith(1);
-  expect(onChange).toHaveBeenCalledWith(1);
-  wrapper.vm.$destroy();
-});
-
-test('v-model', () => {
-  const onChange = jest.fn();
-  const wrapper = mount({
-    template: `
-      <van-sidebar v-model="active" @change="onChange">
-        <van-sidebar-item>Text</van-sidebar-item>
-        <van-sidebar-item>Text</van-sidebar-item>
-      </van-sidebar>
-    `,
-    data() {
-      return {
-        active: 0,
-      };
-    },
-    methods: {
-      onChange,
-    },
-  });
-
-  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
-  expect(wrapper.vm.active).toEqual(1);
-  expect(onChange).toHaveBeenCalledWith(1);
-});
-
-test('disabled prop', () => {
-  const wrapper = mount({
-    template: `
-      <van-sidebar v-model="active">
-        <van-sidebar-item>Text</van-sidebar-item>
-        <van-sidebar-item disabled>Text</van-sidebar-item>
-      </van-sidebar>
-    `,
-    data() {
-      return {
-        active: 0,
-      };
-    },
-  });
-
-  wrapper.findAll('.van-sidebar-item').at(1).trigger('click');
-  expect(wrapper.vm.active).toEqual(0);
-});
-
-test('without parent', () => {
-  const consoleError = console.error;
-  try {
-    console.error = jest.fn();
-    mount(Sidebar);
-  } catch (err) {
-    console.error = consoleError;
-    expect(err).toBeTruthy();
-  }
-});
-
-test('title slot', () => {
-  const wrapper = mount({
-    template: `
-      <van-sidebar v-model="active">
-        <van-sidebar-item>
-          <template #title>Title Slot</template>
-        </van-sidebar-item>
-      </van-sidebar>
-    `,
-    data() {
-      return {
-        active: 0,
-      };
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
diff --git a/src/sidebar/test/index.spec.js b/src/sidebar/test/index.spec.js
new file mode 100644
index 000000000..f5700ce06
--- /dev/null
+++ b/src/sidebar/test/index.spec.js
@@ -0,0 +1,106 @@
+import { ref } from 'vue';
+import { mount } from '@vue/test-utils';
+import Sidebar from '..';
+import SidebarItem from '../../sidebar-item';
+
+test('should emit change event when active item changed', () => {
+  const onChange = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Sidebar onChange={onChange}>
+          <SidebarItem>Text</SidebarItem>
+          <SidebarItem>Text</SidebarItem>
+        </Sidebar>
+      );
+    },
+  });
+
+  const items = wrapper.findAll('.van-sidebar-item');
+
+  items[0].trigger('click');
+  expect(onChange).toHaveBeenCalledTimes(0);
+
+  items[1].trigger('click');
+  expect(onChange).toHaveBeenCalledWith(1);
+});
+
+test('should emit click event when SidebarItem is clicked', () => {
+  const onClick = jest.fn();
+  const wrapper = mount({
+    render() {
+      return (
+        <Sidebar>
+          <SidebarItem onClick={onClick}>Text</SidebarItem>
+        </Sidebar>
+      );
+    },
+  });
+
+  wrapper.find('.van-sidebar-item').trigger('click');
+  expect(onClick).toHaveBeenCalledWith(0);
+});
+
+test('should update v-model when active item changed', () => {
+  const onChange = jest.fn();
+  const wrapper = mount({
+    setup() {
+      return {
+        active: ref(0),
+      };
+    },
+    render() {
+      return (
+        <Sidebar v-model={this.active} onChange={onChange}>
+          <SidebarItem>Text</SidebarItem>
+          <SidebarItem>Text</SidebarItem>
+        </Sidebar>
+      );
+    },
+  });
+
+  wrapper.findAll('.van-sidebar-item')[1].trigger('click');
+  expect(wrapper.vm.active).toEqual(1);
+  expect(onChange).toHaveBeenCalledWith(1);
+  expect(onChange).toHaveBeenCalledTimes(1);
+});
+
+test('should not update v-model when disabled SidebarItem is clicked', () => {
+  const wrapper = mount({
+    setup() {
+      return {
+        active: ref(0),
+      };
+    },
+    render() {
+      return (
+        <Sidebar v-model={this.active}>
+          <SidebarItem>Text</SidebarItem>
+          <SidebarItem disabled>Text</SidebarItem>
+        </Sidebar>
+      );
+    },
+  });
+
+  wrapper.findAll('.van-sidebar-item')[1].trigger('click');
+  expect(wrapper.vm.active).toEqual(0);
+});
+
+test('should render title slot correctly', () => {
+  const wrapper = mount({
+    setup() {
+      return {
+        active: ref(0),
+      };
+    },
+    render() {
+      return (
+        <Sidebar v-model={this.active}>
+          <SidebarItem v-slots={{ title: () => 'Custom Title' }} />
+        </Sidebar>
+      );
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});