diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index 541aa56fb..44c7550e8 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should change close icon position when using close-icon-position prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left" role="button">
+  <!---->
+  <!---->
+  <!----></i>
+`;
+
+exports[`should change close icon when using close-icon prop 1`] = `
+<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right" role="button">
+  <!---->
+  <!---->
+  <!----></i>
+`;
+
 exports[`should render cover slot correctly 1`] = `
 <transition-stub class="van-image-preview__overlay">
   <div class="van-overlay">
@@ -20,6 +34,6 @@ exports[`should render cover slot correctly 1`] = `
 </transition-stub>
 `;
 
-exports[`should render index slot correctly 1`] = `<div class="van-image-preview__index">Custom Index</div>`;
+exports[`should render index slot correctly 1`] = `<div class="van-image-preview__index">Custom Index: 0</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/function.spec.js b/src/image-preview/test/function.spec.js
new file mode 100644
index 000000000..82010ddb4
--- /dev/null
+++ b/src/image-preview/test/function.spec.js
@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import ImagePreview from '..';
+import ImagePreviewComponent from '../ImagePreview';
+
+test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
+  expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
+});
+
+test('should register component to app', () => {
+  const app = createApp();
+  app.use(ImagePreview);
+  expect(app.component(ImagePreviewComponent.name)).toBeTruthy();
+});
diff --git a/src/image-preview/test/index.legacy.js b/src/image-preview/test/index.legacy.js
index b0ce554d7..db4c354e9 100644
--- a/src/image-preview/test/index.legacy.js
+++ b/src/image-preview/test/index.legacy.js
@@ -56,44 +56,6 @@ test('render image', async () => {
   expect(wrapper.emitted('input')[0][0]).toEqual(false);
 });
 
-test('closeable prop', () => {
-  const wrapper = mount(ImagePreviewVue, {
-    props: {
-      images,
-      value: true,
-      closeable: true,
-    },
-  });
-
-  wrapper.find('.van-image-preview__close-icon').trigger('click');
-  expect(wrapper.emitted('input')[0][0]).toEqual(false);
-});
-
-test('close-icon prop', () => {
-  const wrapper = mount(ImagePreviewVue, {
-    props: {
-      value: true,
-      closeable: true,
-      closeIcon: 'close',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('close-icon-position prop', () => {
-  const wrapper = mount(ImagePreviewVue, {
-    props: {
-      value: true,
-      closeable: true,
-      closeIcon: 'close',
-      closeIconPosition: 'top-left',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
 test('async close prop', async () => {
   const wrapper = mount(ImagePreviewVue, {
     props: {
@@ -213,11 +175,6 @@ test('onScale option', async (done) => {
   restore();
 });
 
-test('register component', () => {
-  Vue.use(ImagePreview);
-  expect(Vue.component(ImagePreviewVue.name)).toBeTruthy();
-});
-
 test('zoom in and drag image to move', async () => {
   const restore = mockGetBoundingClientRect({ width: 100, height: 100 });
 
@@ -266,17 +223,6 @@ test('zoom out', async () => {
   restore();
 });
 
-test('set show-index prop to false', () => {
-  const wrapper = mount(ImagePreviewVue, {
-    props: {
-      value: true,
-      showIndex: false,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
 test('closeOnPopstate', () => {
   const wrapper = mount(ImagePreviewVue, {
     props: {
diff --git a/src/image-preview/test/index.spec.js b/src/image-preview/test/index.spec.js
index 9fd57984a..dd749aad8 100644
--- a/src/image-preview/test/index.spec.js
+++ b/src/image-preview/test/index.spec.js
@@ -1,5 +1,4 @@
 import { mount } from '@vue/test-utils';
-import ImagePreview from '..';
 import ImagePreviewComponent from '../ImagePreview';
 import { later } from '../../../test';
 
@@ -54,13 +53,62 @@ test('should render index slot correctly', () => {
       show: true,
     },
     slots: {
-      index: () => `Custom Index`,
+      index: ({ index }) => `Custom Index: ${index}`,
     },
   });
 
   expect(wrapper.find('.van-image-preview__index').html()).toMatchSnapshot();
 });
 
-test('should expose ImagePreviewComponent in ImagePreview.Component', () => {
-  expect(ImagePreview.Component).toEqual(ImagePreviewComponent);
+test('should render close icon when using closeable prop', () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+      images,
+      closeable: true,
+    },
+  });
+
+  wrapper.find('.van-image-preview__close-icon').trigger('click');
+  expect(wrapper.emitted('update:show')[0][0]).toEqual(false);
+});
+
+test('should change close icon when using close-icon prop', () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+      closeable: true,
+      closeIcon: 'success',
+    },
+  });
+
+  expect(
+    wrapper.find('.van-image-preview__close-icon').html()
+  ).toMatchSnapshot();
+});
+
+test('should change close icon position when using close-icon-position prop', () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+      closeable: true,
+      closeIconPosition: 'top-left',
+    },
+  });
+
+  expect(
+    wrapper.find('.van-image-preview__close-icon').html()
+  ).toMatchSnapshot();
+});
+
+test('should hide index when show-index prop is false', async () => {
+  const wrapper = mount(ImagePreviewComponent, {
+    props: {
+      show: true,
+    },
+  });
+  expect(wrapper.find('.van-image-preview__index').exists()).toBeTruthy();
+
+  await wrapper.setProps({ showIndex: false });
+  expect(wrapper.find('.van-image-preview__index').exists()).toBeFalsy();
 });