diff --git a/src/collapse/test/__snapshots__/index.legacy.js.snap b/src/collapse/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index a6b746978..000000000
--- a/src/collapse/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`disable border 1`] = `
-<div class="van-collapse">
-  <div class="van-collapse-item">
-    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-      <div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div class="van-collapse-item van-collapse-item--border">
-    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-      <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div class="van-collapse-item van-collapse-item--border">
-    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-      <div class="van-cell__title"><span>c</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`lazy render collapse content 1`] = `
-<div class="van-collapse van-hairline--top-bottom">
-  <div class="van-collapse-item" style="padding: 0px;">
-    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">
-      <div class="van-cell__title"><span>a</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-  </div>
-  <div class="van-collapse-item van-collapse-item--border" style="padding: 0px;">
-    <div role="button" tabindex="0" aria-expanded="true" class="van-cell van-cell--clickable van-collapse-item__title van-collapse-item__title--expanded">
-      <div class="van-cell__title"><span>b</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
-        <!----></i>
-    </div>
-    <div class="van-collapse-item__wrapper">
-      <div class="van-collapse-item__content">content</div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`render collapse-item slot 1`] = `
-<div class="van-collapse van-hairline--top-bottom">
-  <div class="van-collapse-item">
-    <div role="button" tabindex="0" aria-expanded="false" class="van-cell van-cell--clickable van-collapse-item__title">this is icon<div class="van-cell__title">this is title</div>
-      <div class="van-cell__value">this is value</div>this is right icon
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/collapse/test/__snapshots__/index.spec.js.snap b/src/collapse/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..ad067f0a2
--- /dev/null
+++ b/src/collapse/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render slots of CollapseItem correctly 1`] = `
+<div class="van-collapse van-hairline--top-bottom">
+  <div class="van-collapse-item">
+    <div class="van-cell van-cell--clickable van-collapse-item__title"
+         role="button"
+         tabindex="0"
+         aria-expanded="false"
+         disabled="false"
+    >
+      this is icon
+      <div class="van-cell__title">
+        this is title
+      </div>
+      <div class="van-cell__value">
+        this is value
+      </div>
+      this is right icon
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/collapse/test/index.legacy.js b/src/collapse/test/index.legacy.js
deleted file mode 100644
index 1f3ef5ba2..000000000
--- a/src/collapse/test/index.legacy.js
+++ /dev/null
@@ -1,182 +0,0 @@
-import Collapse from '..';
-import CollapseItem from '../../collapse-item';
-import { later, mount } from '../../../test';
-
-const component = {
-  template: `
-  <van-collapse v-model="active" :accordion="accordion" :border="border">
-    <van-collapse-item title="a" name="first">content</van-collapse-item>
-    <van-collapse-item title="b">content</van-collapse-item>
-    <van-collapse-item title="c">content</van-collapse-item>
-  </van-collapse>
-  `,
-  props: {
-    accordion: Boolean,
-    border: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  data() {
-    return {
-      active: this.accordion ? '' : [],
-    };
-  },
-};
-
-test('basic mode', async () => {
-  const wrapper = mount(component);
-
-  const titles = wrapper.findAll('.van-collapse-item__title');
-  titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual(['first']);
-
-  await later();
-  titles[1].trigger('click');
-  expect(wrapper.vm.active).toEqual(['first', 1]);
-
-  await later();
-  titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual([1]);
-
-  wrapper.unmount();
-});
-
-test('accordion', async () => {
-  const wrapper = mount(component, {
-    props: {
-      accordion: true,
-    },
-  });
-
-  const titles = wrapper.findAll('.van-collapse-item__title');
-  titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual('first');
-
-  titles[1].trigger('click');
-  expect(wrapper.vm.active).toEqual(1);
-
-  await later();
-  titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual('first');
-
-  titles[0].trigger('click');
-  expect(wrapper.vm.active).toEqual('');
-});
-
-test('render collapse-item slot', () => {
-  const wrapper = mount({
-    template: `
-      <van-collapse v-model="active">
-        <van-collapse-item>
-          <template v-slot:title>this is title</template>
-          <template v-slot:value>this is value</template>
-          <template v-slot:icon>this is icon</template>
-          <template v-slot:right-icon>this is right icon</template>
-        </van-collapse-item>
-      </van-collapse>
-      `,
-    data() {
-      return {
-        active: [],
-      };
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('disable border', () => {
-  const wrapper = mount(component, {
-    props: {
-      border: false,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('lazy render collapse content', async () => {
-  const wrapper = mount({
-    template: `
-      <collapse v-model="active">
-        <collapse-item title="a" name="first" style="padding: 0;">content</collapse-item>
-        <collapse-item title="b" style="padding: 0;">{{ content }}</collapse-item>
-      </collapse>
-    `,
-    components: {
-      Collapse,
-      CollapseItem,
-    },
-    data() {
-      return {
-        content: '',
-        active: [],
-      };
-    },
-  });
-
-  const titles = wrapper.findAll('.van-collapse-item__title');
-
-  titles[1].trigger('click');
-  wrapper.vm.content = 'content';
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('toggle method', (done) => {
-  mount({
-    template: `
-    <van-collapse v-model="active" >
-      <van-collapse-item name="a" ref="a" />
-      <van-collapse-item name="b" ref="b" />
-    </van-collapse>
-  `,
-    data() {
-      return { active: [] };
-    },
-    mounted() {
-      this.$refs.a.toggle();
-      expect(this.active).toEqual(['a']);
-
-      this.$refs.b.toggle();
-      expect(this.active).toEqual(['a', 'b']);
-
-      this.$refs.b.toggle(false);
-      expect(this.active).toEqual(['a']);
-
-      this.$refs.a.toggle();
-      expect(this.active).toEqual([]);
-
-      done();
-    },
-  });
-});
-
-test('toggle method in accordion mode', (done) => {
-  mount({
-    template: `
-    <van-collapse v-model="active" accordion>
-      <van-collapse-item name="a" ref="a" />
-      <van-collapse-item name="b" ref="b" />
-    </van-collapse>
-  `,
-    data() {
-      return { active: '' };
-    },
-    mounted() {
-      this.$refs.a.toggle();
-      expect(this.active).toEqual('a');
-
-      this.$refs.b.toggle();
-      expect(this.active).toEqual('b');
-
-      this.$refs.b.toggle(false);
-      expect(this.active).toEqual('');
-
-      this.$refs.a.toggle();
-      expect(this.active).toEqual('a');
-
-      done();
-    },
-  });
-});
diff --git a/src/collapse/test/index.spec.js b/src/collapse/test/index.spec.js
new file mode 100644
index 000000000..cf1c55ef2
--- /dev/null
+++ b/src/collapse/test/index.spec.js
@@ -0,0 +1,208 @@
+import { ref } from 'vue';
+import Collapse from '..';
+import CollapseItem from '../../collapse-item';
+import { later, mount } from '../../../test';
+
+const Component = {
+  props: {
+    accordion: Boolean,
+    border: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      active: this.accordion ? '' : [],
+    };
+  },
+  render() {
+    return (
+      <Collapse
+        v-model={this.active}
+        border={this.border}
+        accordion={this.accordion}
+      >
+        <CollapseItem title="a" name="first">
+          content
+        </CollapseItem>
+        <CollapseItem title="b">content</CollapseItem>
+        <CollapseItem title="c">content</CollapseItem>
+      </Collapse>
+    );
+  },
+};
+
+test('should update active value when title is clicked', async () => {
+  const wrapper = mount(Component);
+
+  const titles = wrapper.findAll('.van-collapse-item__title');
+  titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual(['first']);
+
+  await later();
+  titles[1].trigger('click');
+  expect(wrapper.vm.active).toEqual(['first', 1]);
+
+  await later();
+  titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual([1]);
+
+  wrapper.unmount();
+});
+
+test('should update active value when title is clicked in accordion mode', async () => {
+  const wrapper = mount(Component, {
+    props: {
+      accordion: true,
+    },
+  });
+
+  const titles = wrapper.findAll('.van-collapse-item__title');
+  titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual('first');
+
+  titles[1].trigger('click');
+  expect(wrapper.vm.active).toEqual(1);
+
+  titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual('first');
+
+  await later();
+  titles[0].trigger('click');
+  expect(wrapper.vm.active).toEqual('');
+});
+
+test('should render slots of CollapseItem correctly', () => {
+  const wrapper = mount({
+    data() {
+      return {
+        active: [],
+      };
+    },
+    render() {
+      return (
+        <Collapse v-model={this.active}>
+          <CollapseItem
+            v-slots={{
+              title: () => 'this is title',
+              value: () => 'this is value',
+              icon: () => 'this is icon',
+              'right-icon': () => 'this is right icon',
+            }}
+          />
+        </Collapse>
+      );
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should not render border when border prop is false', () => {
+  const wrapper = mount(Component, {
+    props: {
+      border: false,
+    },
+  });
+
+  expect(wrapper.find('.van-hairline--top-bottom').exists()).toBeFalsy();
+});
+
+test('should lazy render collapse content', async () => {
+  const wrapper = mount({
+    data() {
+      return {
+        active: [],
+      };
+    },
+    render() {
+      return (
+        <Collapse v-model={this.active}>
+          <CollapseItem title="a">content</CollapseItem>
+          <CollapseItem title="b">
+            <div class="foo" />
+          </CollapseItem>
+        </Collapse>
+      );
+    },
+  });
+
+  expect(wrapper.find('.foo').exists()).toBeFalsy();
+
+  const titles = wrapper.findAll('.van-collapse-item__title');
+  await titles[1].trigger('click');
+  expect(wrapper.find('.foo').exists()).toBeTruthy();
+});
+
+test('should toggle collapse after calling the toggle method', async () => {
+  const wrapper = mount({
+    setup() {
+      const itemA = ref();
+      const itemB = ref();
+      const active = ref([]);
+      return {
+        itemA,
+        itemB,
+        active,
+      };
+    },
+    render() {
+      return (
+        <Collapse v-model={this.active}>
+          <CollapseItem name="a" ref="itemA" />
+          <CollapseItem name="b" ref="itemB" />
+        </Collapse>
+      );
+    },
+  });
+
+  wrapper.vm.itemA.toggle();
+  expect(wrapper.vm.active).toEqual(['a']);
+
+  await later();
+  wrapper.vm.itemB.toggle();
+  expect(wrapper.vm.active).toEqual(['a', 'b']);
+
+  wrapper.vm.itemB.toggle(false);
+  expect(wrapper.vm.active).toEqual(['a']);
+
+  wrapper.vm.itemA.toggle();
+  expect(wrapper.vm.active).toEqual([]);
+});
+
+test('should toggle collapse after calling the toggle method in accordion mode', async () => {
+  const wrapper = mount({
+    setup() {
+      const itemA = ref();
+      const itemB = ref();
+      const active = ref([]);
+      return {
+        itemA,
+        itemB,
+        active,
+      };
+    },
+    render() {
+      return (
+        <Collapse v-model={this.active} accordion>
+          <CollapseItem name="a" ref="itemA" />
+          <CollapseItem name="b" ref="itemB" />
+        </Collapse>
+      );
+    },
+  });
+
+  wrapper.vm.itemA.toggle();
+  expect(wrapper.vm.active).toEqual('a');
+
+  wrapper.vm.itemB.toggle();
+  expect(wrapper.vm.active).toEqual('b');
+
+  await later();
+  wrapper.vm.itemB.toggle(false);
+  expect(wrapper.vm.active).toEqual('');
+
+  wrapper.vm.itemA.toggle();
+  expect(wrapper.vm.active).toEqual('a');
+});