diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index bab5d5b4b..1a86f6835 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -193,7 +193,7 @@ export default createComponent({
           setActive(+startPosition);
           nextTick(() => {
             resize();
-            swipeRef.value.swipeTo(+startPosition, { immediate: true });
+            swipeTo(+startPosition, { immediate: true });
           });
         } else {
           emit('close', {
diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..541aa56fb
--- /dev/null
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render cover slot correctly 1`] = `
+<transition-stub class="van-image-preview__overlay">
+  <div class="van-overlay">
+    <!---->
+  </div>
+</transition-stub>
+<transition-stub>
+  <div class="van-popup van-popup--center van-image-preview">
+    <!---->
+    <div class="van-swipe van-image-preview__swipe">
+      <div style="width: 0px; transition-duration: 500ms; transform: translateX(0px);" class="van-swipe__track"></div>
+      <!---->
+    </div>
+    <div class="van-image-preview__index">1 / 0</div>
+    <div class="van-image-preview__cover">Custom Cover</div>
+    <!---->
+  </div>
+</transition-stub>
+`;
+
+exports[`should render index slot correctly 1`] = `<div class="van-image-preview__index">Custom Index</div>`;
+
+exports[`should swipe to currect index after calling the swipeTo method 1`] = `<div class="van-image-preview__index">3 / 3</div>`;
diff --git a/src/image-preview/test/index.legacy.js b/src/image-preview/test/index.legacy.js
index 6d846255d..b0ce554d7 100644
--- a/src/image-preview/test/index.legacy.js
+++ b/src/image-preview/test/index.legacy.js
@@ -277,30 +277,6 @@ test('set show-index prop to false', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('index slot', () => {
-  const wrapper = mount({
-    template: `
-      <van-image-preview :value="true">
-        <template #index>Custom Index</template>
-      </van-image-preview>
-    `,
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('cover slot', () => {
-  const wrapper = mount({
-    template: `
-      <van-image-preview :value="true">
-        <template #cover>Custom Cover Content</template>
-      </van-image-preview>
-    `,
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
 test('closeOnPopstate', () => {
   const wrapper = mount(ImagePreviewVue, {
     props: {
@@ -322,10 +298,6 @@ test('closeOnPopstate', () => {
   expect(wrapper.emitted('input')[1]).toBeFalsy();
 });
 
-test('ImagePreview.Component', () => {
-  expect(ImagePreview.Component).toEqual(ImagePreviewVue);
-});
-
 test('get container with function call ', async (done) => {
   const element = document.createElement('div');
   document.body.appendChild(element);
@@ -344,49 +316,3 @@ test('get container with function call ', async (done) => {
 
   done();
 });
-
-test('get container with component call', () => {
-  const div1 = document.createElement('div');
-  const div2 = document.createElement('div');
-  const wrapper = mount({
-    template: `
-    <div>
-      <van-image-preview :value="true" :teleport="teleport">
-      </van-image-preview>
-    </div>
-    `,
-    data() {
-      return {
-        teleport: () => div1,
-      };
-    },
-  });
-  const imageView = wrapper.find('.van-image-preview').element;
-
-  expect(imageView.parentNode).toEqual(div1);
-  wrapper.vm.teleport = () => div2;
-  expect(imageView.parentNode).toEqual(div2);
-  wrapper.vm.teleport = null;
-  expect(wrapper.element).toEqual(wrapper.element);
-});
-
-test('swipeTo method', async () => {
-  const wrapper = mount({
-    template: `
-    <div>
-      <van-image-preview ref="imagePreview" :value="true" :images="images">
-      </van-image-preview>
-    </div>
-    `,
-    data() {
-      return {
-        images,
-      };
-    },
-  });
-  const { imagePreview } = wrapper.vm.$refs;
-  imagePreview.swipeTo(2);
-
-  await later(100);
-  expect(imagePreview.active).toEqual(2);
-});
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
new file mode 100644
index 000000000..9fd57984a
--- /dev/null
+++ b/src/image-preview/test/index.spec.js
@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils';
+import ImagePreview from '..';
+import ImagePreviewComponent from '../ImagePreview';
+import { later } from '../../../test';
+
+const images = [
+  'https://img.yzcdn.cn/1.png',
+  'https://img.yzcdn.cn/2.png',
+  'https://img.yzcdn.cn/3.png',
+];
+
+test('should swipe to currect index after calling the swipeTo method', async () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+      images,
+    },
+  });
+  await later();
+  wrapper.vm.swipeTo(2);
+
+  await later(100);
+  expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot();
+});
+
+test('should allow to use the teleport prop', () => {
+  const root = document.createElement('div');
+  mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+      teleport: root,
+    },
+  });
+
+  expect(root.querySelector('.van-image-preview')).toBeTruthy();
+});
+
+test('should render cover slot correctly', () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+    },
+    slots: {
+      cover: () => 'Custom Cover',
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should render index slot correctly', () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+    },
+    slots: {
+      index: () => `Custom Index`,
+    },
+  });
+
+  expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot();
+});
+
+test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
+  expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
+});