diff --git a/src/switch/test/__snapshots__/index.legacy.js.snap b/src/switch/test/__snapshots__/index.legacy.js.snap
deleted file mode 100644
index 8a9a87679..000000000
--- a/src/switch/test/__snapshots__/index.legacy.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`inactive-color prop 1`] = `
-<div role="switch" aria-checked="false" class="van-switch" style="background-color: black;">
-  <div class="van-switch__node"></div>
-</div>
-`;
-
-exports[`size prop 1`] = `
-<div role="switch" aria-checked="false" class="van-switch" style="font-size: 20px;">
-  <div class="van-switch__node"></div>
-</div>
-`;
diff --git a/src/switch/test/__snapshots__/index.spec.js.snap b/src/switch/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..c9582dfc0
--- /dev/null
+++ b/src/switch/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should apply active color to loading icon 1`] = `
+<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: red;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+  <!---->
+</div>
+`;
+
+exports[`should apply inactive color to loading icon 1`] = `
+<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: black;"><svg class="van-loading__circular" viewBox="25 25 50 50"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span>
+  <!---->
+</div>
+`;
diff --git a/src/switch/test/index.legacy.js b/src/switch/test/index.legacy.js
deleted file mode 100644
index 58580657c..000000000
--- a/src/switch/test/index.legacy.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import Switch from '..';
-import { mount } from '@vue/test-utils';
-
-test('emit event', () => {
-  const input = jest.fn();
-  const change = jest.fn();
-  const wrapper = mount(Switch, {
-    listeners: {
-      input,
-      change,
-    },
-  });
-  wrapper.trigger('click');
-
-  expect(input).toHaveBeenCalledWith(true);
-  expect(change).toHaveBeenCalledWith(true);
-});
-
-test('disabled', () => {
-  const input = jest.fn();
-  const change = jest.fn();
-  const wrapper = mount(Switch, {
-    listeners: {
-      input,
-      change,
-    },
-    props: {
-      disabled: true,
-    },
-  });
-  wrapper.trigger('click');
-
-  expect(input).toHaveBeenCalledTimes(0);
-  expect(change).toHaveBeenCalledTimes(0);
-});
-
-test('active-value & inactive-value prop', () => {
-  const input = jest.fn();
-  const change = jest.fn();
-  const wrapper = mount(Switch, {
-    props: {
-      value: '1',
-      activeValue: '1',
-      inactiveValue: '2',
-    },
-    listeners: {
-      input,
-      change,
-    },
-  });
-
-  wrapper.trigger('click');
-
-  expect(input).toHaveBeenCalledWith('2');
-  expect(change).toHaveBeenCalledWith('2');
-});
-
-test('inactive-color prop', () => {
-  const wrapper = mount(Switch, {
-    props: {
-      value: '2',
-      inactiveValue: '2',
-      inactiveColor: 'black',
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('size prop', () => {
-  const wrapper = mount(Switch, {
-    props: {
-      size: 20,
-    },
-  });
-
-  expect(wrapper.html()).toMatchSnapshot();
-});
-
-test('click event', () => {
-  const click = jest.fn();
-  const wrapper = mount(Switch, {
-    listeners: {
-      click,
-    },
-  });
-
-  wrapper.trigger('click');
-
-  expect(click).toHaveBeenCalledTimes(1);
-});
diff --git a/src/switch/test/index.spec.js b/src/switch/test/index.spec.js
new file mode 100644
index 000000000..3ad1dd35b
--- /dev/null
+++ b/src/switch/test/index.spec.js
@@ -0,0 +1,111 @@
+import Switch from '..';
+import { mount } from '@vue/test-utils';
+
+test('should emit update:modelValue event when click the switch button', async () => {
+  const wrapper = mount(Switch);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('update:modelValue').length).toEqual(1);
+  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual(true);
+
+  await wrapper.setProps({ modelValue: true });
+  wrapper.trigger('click');
+  expect(wrapper.emitted('update:modelValue').length).toEqual(2);
+  expect(wrapper.emitted('update:modelValue')[1][0]).toEqual(false);
+});
+
+test('should emit change event when click the switch button', async () => {
+  const wrapper = mount(Switch);
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('change').length).toEqual(1);
+  expect(wrapper.emitted('change')[0][0]).toEqual(true);
+
+  await wrapper.setProps({ modelValue: true });
+  wrapper.trigger('click');
+  expect(wrapper.emitted('change').length).toEqual(2);
+  expect(wrapper.emitted('change')[1][0]).toEqual(false);
+});
+
+test('should not emit change event or update:modelValue event if disabled', async () => {
+  const wrapper = mount(Switch, {
+    props: {
+      disabled: true,
+    },
+  });
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('change')).toBeFalsy();
+  expect(wrapper.emitted('update:modelValue')).toBeFalsy();
+});
+
+test('should change active color when using active-color prop', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      modelValue: true,
+      activeColor: 'black',
+    },
+  });
+
+  expect(wrapper.element.style.backgroundColor).toEqual('black');
+});
+
+test('should change inactive color when using inactive-color prop', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      inactiveColor: 'black',
+    },
+  });
+
+  expect(wrapper.element.style.backgroundColor).toEqual('black');
+});
+
+test('should apply active color to loading icon', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      loading: true,
+      modelValue: true,
+      activeColor: 'red',
+    },
+  });
+
+  const loading = wrapper.find('.van-switch__loading');
+  expect(loading.html()).toMatchSnapshot();
+});
+
+test('should apply inactive color to loading icon', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      loading: true,
+      inactiveColor: 'black',
+    },
+  });
+
+  const loading = wrapper.find('.van-switch__loading');
+  expect(loading.html()).toMatchSnapshot();
+});
+
+test('should change size when using size prop', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      size: 20,
+    },
+  });
+
+  expect(wrapper.element.style.fontSize).toEqual('20px');
+});
+
+test('should allow to custom active-value and inactive-value', () => {
+  const wrapper = mount(Switch, {
+    props: {
+      modelValue: 'on',
+      activeValue: 'on',
+      inactiveValue: 'off',
+    },
+  });
+
+  expect(wrapper.find('.van-switch--on').exists()).toBeTruthy();
+
+  wrapper.trigger('click');
+  expect(wrapper.emitted('update:modelValue')[0][0]).toEqual('off');
+});