types: test cases typing

src/action-bar-button/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import ActionBarButton from '..';
 
 test('should render default slot correctly', () => {

src/action-bar-icon/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import ActionBarIcon from '..';
 
 test('should render default slot correctly', () => {

src/action-bar/test/index.spec.ts

@@ -1,5 +1,5 @@
 import ActionBar from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should allow to disable safe-area-inset-bottom prop', () => {
   const wrapper = mount(ActionBar, {

src/action-sheet/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import ActionSheet from '..';
 
 test('should emit select event after clicking option', () => {
@@ -129,9 +129,8 @@ test('should change option color when using the color prop', () => {
     },
   });
 
-  expect(wrapper.find('.van-action-sheet__item').element.style.color).toEqual(
+  const item = wrapper.find('.van-action-sheet__item');
-    'red'
+  expect(item.style.color).toEqual('red');
-  );
 });
 
 test('should hide close icon when the closeable prop is false', async () => {

src/address-list/test/index.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import AddressList from '..';
 
 const list = [

src/badge/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Badge from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render nothing when content is empty string', () => {
   const wrapper = mount(Badge, {
@@ -52,7 +52,7 @@ test('should change dot position when using offset prop', () => {
     },
   });
 
-  const badge = wrapper.find('.van-badge').element;
+  const badge = wrapper.find('.van-badge');
   expect(badge.style.top).toEqual('4px');
   expect(badge.style.right).toEqual('-2px');
 });
@@ -65,7 +65,7 @@ test('should change dot position when using offset prop without children', () =>
     },
   });
 
-  const badge = wrapper.find('.van-badge').element;
+  const badge = wrapper.find('.van-badge');
   expect(badge.style.marginTop).toEqual('4px');
   expect(badge.style.marginLeft).toEqual('2px');
 });

src/button/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Button from '..';
 
 test('should emit click event', () => {
@@ -37,7 +37,7 @@ test('should hide border when color is gradient', () => {
     },
   });
 
-  expect(wrapper.element.style.border).toEqual('0px');
+  expect(wrapper.style.border).toEqual('0px');
 });
 
 test('should change icon class prefix when using icon-prefix prop', () => {
@@ -72,7 +72,7 @@ test('should render loading of a specific size when using loading-size prop', ()
     },
   });
 
-  const loading = wrapper.find('.van-loading__spinner').element;
+  const loading = wrapper.find('.van-loading__spinner');
   expect(loading.style.width).toEqual('10px');
   expect(loading.style.height).toEqual('10px');
 });

src/calendar/test/index.legacy.js

@@ -381,7 +381,7 @@ test('popup wrapper', async () => {
   expect(wrapper.html()).toMatchSnapshot();
 
   wrapper.find('.van-popup__close-icon').trigger('click');
-  expect(wrapper.element.style.display).toEqual('none');
+  expect(wrapper.style.display).toEqual('none');
 });
 
 test('set show-mark prop to false', async () => {

src/card/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Card from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit click event after clicked', () => {
   const onClick = jest.fn();

src/cascader/test/index.spec.ts

@@ -1,6 +1,6 @@
 import Cascader from '..';
-import { mount } from '@vue/test-utils';
+import { mount , later } from '../../../test';
-import { later } from '../../../test';
+
 import options from '../demo/area-en-US';
 
 test('should emit change event when active option changed', async () => {

src/cell-group/test/index.spec.ts

@@ -1,5 +1,5 @@
 import CellGroup from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render title slot correctly', () => {
   const wrapper = mount(CellGroup, {

src/cell/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Cell from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render default slot correctly', () => {
   const wrapper = mount(Cell, {
@@ -70,7 +70,8 @@ test('should change title style when using title-style prop', () => {
     },
   });
 
-  expect(wrapper.find('.van-cell__title').element.style.color).toEqual('red');
+  const title = wrapper.find('.van-cell__title');
+  expect(title.style.color).toEqual('red');
 });
 
 test('should change icon class prefix when using icon-prefix prop', () => {

src/checkbox-group/test/index.spec.tsx

@@ -1,7 +1,7 @@
-import { mount } from '@vue/test-utils';
-import Checkbox from '../../checkbox';
-import CheckboxGroup from '..';
 import { ref, nextTick } from 'vue';
+import { mount } from '../../../test';
+import Checkbox from '../../checkbox';
+import CheckboxGroup, { CheckboxGroupToggleAllOptions } from '..';
 
 test('should emit "update:modelValue" event when checkbox is clicked', async () => {
   const wrapper = mount({
@@ -45,8 +45,8 @@ test('should change icon size when using icon-size prop', () => {
   });
 
   const icons = wrapper.findAll('.van-checkbox__icon');
-  expect(icons[0].element.style.fontSize).toEqual('10rem');
+  expect(icons[0].style.fontSize).toEqual('10rem');
-  expect(icons[1].element.style.fontSize).toEqual('5rem');
+  expect(icons[1].style.fontSize).toEqual('5rem');
 });
 
 test('should change checked color when using checked-color prop', () => {
@@ -62,24 +62,30 @@ test('should change checked color when using checked-color prop', () => {
   });
 
   const icons = wrapper.findAll('.van-icon');
-  expect(icons[0].element.style.backgroundColor).toEqual('black');
+  expect(icons[0].style.backgroundColor).toEqual('black');
-  expect(icons[1].element.style.backgroundColor).toEqual('white');
+  expect(icons[1].style.backgroundColor).toEqual('white');
 });
 
 test('should ignore Checkbox if bind-group is false', async () => {
   const wrapper = mount({
     setup() {
+      const value = ref(false);
+      const groupRef = ref();
+      const groupValue = ref([]);
+      const toggleAll = (checked?: boolean) => {
+        groupRef.value.toggleAll(checked);
+      };
+
       return {
-        value: ref(false),
+        value,
-        groupValue: ref([]),
+        groupRef,
-        toggleAll(checked) {
+        groupValue,
-          this.$refs.group.toggleAll(checked);
+        toggleAll,
-        },
       };
     },
     render() {
       return (
-        <CheckboxGroup v-model={this.groupValue} ref="group">
+        <CheckboxGroup v-model={this.groupValue} ref="groupRef">
           <Checkbox v-model={this.value} name="a" bindGroup={false} />
           <Checkbox name="b" />
           <Checkbox name="c" />
@@ -100,16 +106,21 @@ test('should ignore Checkbox if bind-group is false', async () => {
 test('should toggle all checkboxes when toggleAll method is called', async () => {
   const wrapper = mount({
     setup() {
+      const value = ref(['a']);
+      const groupRef = ref();
+      const toggleAll = (options?: CheckboxGroupToggleAllOptions) => {
+        groupRef.value.toggleAll(options);
+      };
+
       return {
-        value: ref(['a']),
+        value,
-        toggleAll(checked) {
+        groupRef,
-          this.$refs.group.toggleAll(checked);
+        toggleAll,
-        },
       };
     },
     render() {
       return (
-        <CheckboxGroup v-model={this.value} ref="group">
+        <CheckboxGroup v-model={this.value} ref="groupRef">
           <Checkbox name="a" />
           <Checkbox name="b" />
           <Checkbox name="c" disabled />

src/circle/test/index.spec.ts

@@ -34,8 +34,8 @@ test('should change circle size when using size prop', () => {
     },
   });
 
-  expect(wrapper.element.style.width).toEqual('100px');
+  expect(wrapper.style.width).toEqual('100px');
-  expect(wrapper.element.style.height).toEqual('100px');
+  expect(wrapper.style.height).toEqual('100px');
 });
 
 test('should change stroke linecap when using stroke-linecap prop', () => {

src/col/test/index.spec.tsx

@@ -1,6 +1,6 @@
 import Col from '..';
 import Row from '../../row';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render Col correcly', () => {
   const wrapper = mount(Col, {

src/collapse/index.tsx

@@ -19,7 +19,7 @@ export default createComponent({
       type: [String, Number, Array] as PropType<
         string | number | Array<string | number>
       >,
-      required: true,
+      default: '',
     },
     border: {
       type: Boolean,

src/collapse/test/index.spec.tsx

@@ -1,9 +1,9 @@
-import { ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 import Collapse from '..';
 import CollapseItem from '../../collapse-item';
 import { later, mount } from '../../../test';
 
-const Component = {
+const Component = defineComponent({
   props: {
     accordion: Boolean,
     border: {
@@ -31,7 +31,7 @@ const Component = {
       </Collapse>
     );
   },
-};
+});
 
 test('should update active value when title is clicked', async () => {
   const wrapper = mount(Component);

src/contact-card/test/index.spec.ts

@@ -1,5 +1,5 @@
 import ContactCard from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit click event when clicked', () => {
   const wrapper = mount(ContactCard);

src/contact-list/test/index.spec.ts

@@ -1,5 +1,5 @@
 import ContactList from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 const contactInfo = {
   name: 'jack',

src/datetime-picker/test/datetime-picker.legacy.js

@@ -1,5 +1,5 @@
 import DatetimePicker from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('confirm & cancel event', () => {
   const onConfirm = jest.fn();

src/dialog/test/index.spec.js

@@ -27,7 +27,7 @@ test('should change confirm button color when using confirm-button-color prop',
     },
   });
   const confirmButton = wrapper.find('.van-dialog__confirm');
-  expect(confirmButton.element.style.color).toEqual('red');
+  expect(confirmButton.style.color).toEqual('red');
 });
 
 test('should change cancel button color when using cancel-button-color prop', () => {
@@ -39,7 +39,7 @@ test('should change cancel button color when using cancel-button-color prop', ()
     },
   });
   const cancelButton = wrapper.find('.van-dialog__cancel');
-  expect(cancelButton.element.style.color).toEqual('red');
+  expect(cancelButton.style.color).toEqual('red');
 });
 
 test('should render button text correctly', () => {

src/dropdown-menu/test/index.legacy.js

@@ -226,12 +226,12 @@ test('toggle method', async (done) => {
       await later();
 
       const content = wrapper.find('.van-dropdown-item__content');
-      expect(content.element.style.display).toEqual('');
+      expect(content.style.display).toEqual('');
 
       // hide
       this.$refs.item.toggle(false, { immediate: true });
       await later();
-      expect(content.element.style.display).toEqual('none');
+      expect(content.style.display).toEqual('none');
 
       done();
     },

src/empty/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Empty from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render image slot correctly', () => {
   const wrapper = mount(Empty, {
@@ -48,7 +48,7 @@ test('should change image size when using image-size prop', async () => {
     },
   });
 
-  const image = wrapper.find('.van-empty__image').element;
+  const image = wrapper.find('.van-empty__image');
 
   expect(image.style.width).toEqual('50px');
   expect(image.style.height).toEqual('50px');

src/field/test/index.spec.js

@@ -137,7 +137,7 @@ test('should format input value when type is digit', () => {
 //   const textarea = wrapper.find('.van-field__control');
 
 //   await later();
-//   expect(textarea.element.style.height).toEqual('50px');
+//   expect(textarea.style.height).toEqual('50px');
 // });
 
 test('should call input.focus when vm.focus is called', () => {

src/grid/test/index.spec.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Grid from '..';
 import GridItem from '../../grid-item';
 
@@ -29,9 +29,7 @@ test('should change icon size when using icon-size prop', () => {
     },
   });
 
-  expect(wrapper.find('.van-grid-item__icon').element.style.fontSize).toEqual(
+  expect(wrapper.find('.van-grid-item__icon').style.fontSize).toEqual('10px');
-    '10px'
-  );
 });
 
 test('should render icon-slot correctly', () => {

src/icon/test/index.spec.js

@@ -1,5 +1,5 @@
 import Icon from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should render icon with builtin icon name correctly', () => {
   const wrapper = mount(Icon, {
@@ -73,5 +73,5 @@ test('should change icon size when using size prop', () => {
       size: 20,
     },
   });
-  expect(wrapper.element.style.fontSize).toEqual('20px');
+  expect(wrapper.style.fontSize).toEqual('20px');
 });

src/image-preview/test/index.spec.js

@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils';
+import { mount , later } from '../../../test';
 import ImagePreviewComponent from '../ImagePreview';
-import { later } from '../../../test';
+
 import { trigger } from '../../utils';
 
 const images = [

src/image/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import VanImage from '..';
 import Lazyload from '../../lazyload';
 
@@ -133,8 +133,8 @@ test('should change border radius when using border-radius prop', () => {
     },
   });
 
-  expect(wrapper.element.style.overflow).toEqual('hidden');
+  expect(wrapper.style.overflow).toEqual('hidden');
-  expect(wrapper.element.style.borderRadius).toEqual('3px');
+  expect(wrapper.style.borderRadius).toEqual('3px');
 });
 
 test('should render default slot correctly', () => {

src/loading/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Loading from '..';
 
 test('should change loading size when using size prop', () => {
@@ -8,7 +8,7 @@ test('should change loading size when using size prop', () => {
     },
   });
 
-  const spinner = wrapper.find('.van-loading__spinner').element;
+  const spinner = wrapper.find('.van-loading__spinner');
   expect(spinner.style.width).toEqual('20px');
   expect(spinner.style.height).toEqual('20px');
 });
@@ -23,9 +23,7 @@ test('should change text font-size when using text-size prop', () => {
     },
   });
 
-  expect(wrapper.find('.van-loading__text').element.style.fontSize).toEqual(
+  expect(wrapper.find('.van-loading__text').style.fontSize).toEqual('20px');
-    '20px'
-  );
 });
 
 test('should change text color when using text-color prop', async () => {
@@ -38,7 +36,7 @@ test('should change text color when using text-color prop', async () => {
     },
   });
 
-  expect(wrapper.find('.van-loading__text').element.style.color).toBe('red');
+  expect(wrapper.find('.van-loading__text').style.color).toBe('red');
 });
 
 test('should change text color when using color prop', async () => {
@@ -51,7 +49,7 @@ test('should change text color when using color prop', async () => {
     },
   });
 
-  expect(wrapper.find('.van-loading__text').element.style.color).toBe('green');
+  expect(wrapper.find('.van-loading__text').style.color).toBe('green');
 });
 
 test('should change text color to textColor when using color & textColor prop', async () => {
@@ -65,5 +63,5 @@ test('should change text color to textColor when using color & textColor prop',
     },
   });
 
-  expect(wrapper.find('.van-loading__text').element.style.color).toBe('red');
+  expect(wrapper.find('.van-loading__text').style.color).toBe('red');
 });

src/nav-bar/test/index.spec.ts

@@ -83,5 +83,5 @@ test('should change z-index when using z-index prop', () => {
       zIndex: 100,
     },
   });
-  expect(wrapper.element.style.zIndex).toEqual('100');
+  expect(wrapper.style.zIndex).toEqual('100');
 });

src/overlay/test/index.spec.tsx

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Overlay from '..';
 
 test('should change z-index when using z-index prop', () => {
@@ -9,7 +9,7 @@ test('should change z-index when using z-index prop', () => {
     },
   });
 
-  const overlay = wrapper.find('.van-overlay').element;
+  const overlay = wrapper.find('.van-overlay');
   expect(overlay.style.zIndex).toEqual('99');
 });
 
@@ -35,7 +35,7 @@ test('should allow to custom style with custom-style prop', () => {
     },
   });
 
-  const overlay = wrapper.find('.van-overlay').element;
+  const overlay = wrapper.find('.van-overlay');
   expect(overlay.style.backgroundColor).toEqual('red');
 });
 
@@ -47,7 +47,7 @@ test('should change animation duration when using duration prop', () => {
     },
   });
 
-  const overlay = wrapper.find('.van-overlay').element;
+  const overlay = wrapper.find('.van-overlay');
   expect(overlay.style.animationDuration).toEqual('1s');
 });
 

src/pagination/test/index.spec.ts

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Paginaion from '..';
 
 test('should render prev-text、next-text slot correctly', () => {

src/password-input/test/index.spec.ts

@@ -1,5 +1,5 @@
 import PasswordInput from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit focus event when security is touched', () => {
   const wrapper = mount(PasswordInput);

src/popover/test/index.spec.js

@@ -91,9 +91,7 @@ test('should allow to custom the color of action test', () => {
     },
   });
 
-  expect(wrapper.find('.van-popover__action').element.style.color).toEqual(
+  expect(wrapper.find('.van-popover__action').style.color).toEqual('red');
-    'red'
-  );
 });
 
 test('should locate to reference element when showed', async () => {

src/popup/test/index.spec.js

@@ -29,8 +29,8 @@ test('should change z-index when using z-index prop', async () => {
   });
 
   await nextTick();
-  expect(wrapper.find('.van-popup').element.style.zIndex).toEqual('11');
+  expect(wrapper.find('.van-popup').style.zIndex).toEqual('11');
-  expect(wrapper.find('.van-overlay').element.style.zIndex).toEqual('11');
+  expect(wrapper.find('.van-overlay').style.zIndex).toEqual('11');
 });
 
 test('should lock scroll when showed', async () => {

src/progress/test/index.spec.ts

@@ -25,5 +25,5 @@ test('should change track color when using track-color prop', () => {
     },
   });
 
-  expect(wrapper.element.style.background).toEqual('green');
+  expect(wrapper.style.background).toEqual('green');
 });

src/pull-refresh/index.tsx

@@ -31,7 +31,7 @@ export default createComponent({
     loadingText: String,
     modelValue: {
       type: Boolean,
-      required: true,
+      default: false,
     },
     successDuration: {
       type: [Number, String],

src/pull-refresh/test/index.spec.ts

@@ -148,5 +148,5 @@ test('should set height when using head-height', async () => {
     },
   });
   const head = wrapper.find('.van-pull-refresh__head');
-  expect(head.element.style.height).toEqual('100px');
+  expect(head.style.height).toEqual('100px');
 });

src/radio/test/index.legacy.js

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('radio-group change', () => {
   const wrapper = mount({

src/rate/test/index.spec.js

@@ -112,9 +112,7 @@ test('should change icon size when using size prop', () => {
     },
   });
 
-  expect(wrapper.find('.van-rate__icon').element.style.fontSize).toEqual(
+  expect(wrapper.find('.van-rate__icon').style.fontSize).toEqual('2rem');
-    '2rem'
-  );
 });
 
 test('should not emit change event when untouchable rate is touchmoved', () => {

src/search/test/index.spec.js

@@ -1,5 +1,5 @@
 import Search from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit update:modelValue event when input value changed', () => {
   const onUpdateModelValue = jest.fn();

src/sidebar/test/index.spec.js

@@ -1,5 +1,5 @@
 import { ref } from 'vue';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Sidebar from '..';
 import SidebarItem from '../../sidebar-item';
 

src/skeleton/test/index.spec.tsx

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Skeleton from '..';
 
 test('should render with row width array correctly', () => {
@@ -30,7 +30,7 @@ test('should change avatar size when using avatar-size prop', () => {
     },
   });
 
-  const avatar = wrapper.find('.van-skeleton__avatar').element;
+  const avatar = wrapper.find('.van-skeleton__avatar');
   expect(avatar.style.width).toMatchSnapshot('20rem');
   expect(avatar.style.height).toMatchSnapshot('20ren');
 });

src/slider/test/index.spec.ts

@@ -141,7 +141,7 @@ test('should change slider bar height when using bar-height prop', () => {
     },
   });
 
-  expect(wrapper.element.style.height).toEqual('10px');
+  expect(wrapper.style.height).toEqual('10px');
 });
 
 test('shoud change button size when using button-size prop', () => {
@@ -152,7 +152,7 @@ test('shoud change button size when using button-size prop', () => {
     },
   });
 
-  const button = wrapper.find('.van-slider__button').element;
+  const button = wrapper.find('.van-slider__button');
   expect(button.style.width).toEqual('10px');
   expect(button.style.height).toEqual('10px');
 });

src/stepper/test/index.spec.js

@@ -252,7 +252,7 @@ test('should update input width when using input-width prop', () => {
       inputWidth: '10rem',
     },
   });
-  expect(wrapper.find('input').element.style.width).toEqual('10rem');
+  expect(wrapper.find('input').style.width).toEqual('10rem');
 });
 
 test('should update input height and button size when using button-size prop', () => {

src/steps/test/index.spec.tsx

@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 import Step from '../../step';
 import Steps from '..';
 

src/sticky/test/index.spec.js

@@ -321,7 +321,7 @@ test('should emit scroll event when visibility changed', async () => {
   observerCallback([{ intersectionRatio: 1 }]);
   expect(onScroll).toHaveBeenCalledTimes(2);
 
-  wrapper.element.style.display = 'none';
+  wrapper.style.display = 'none';
   observerCallback([{ intersectionRatio: 0 }]);
   expect(onScroll).toHaveBeenCalledTimes(2);
 

src/submit-bar/test/index.spec.ts

@@ -1,5 +1,5 @@
 import SubmitBar from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit submit event when submit button is clicked', () => {
   const wrapper = mount(SubmitBar);
@@ -78,9 +78,7 @@ test('should adjust text align when using text-align prop', () => {
       textAlign: 'left',
     },
   });
-  expect(wrapper.find('.van-submit-bar__text').element.style.textAlign).toEqual(
+  expect(wrapper.find('.van-submit-bar__text').style.textAlign).toEqual('left');
-    'left'
-  );
 });
 
 test('should allow to disable safe-area-inset-bottom prop', () => {

src/switch/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Switch from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit update:modelValue event when click the switch button', async () => {
   const wrapper = mount(Switch);
@@ -47,7 +47,7 @@ test('should change active color when using active-color prop', () => {
     },
   });
 
-  expect(wrapper.element.style.backgroundColor).toEqual('black');
+  expect(wrapper.style.backgroundColor).toEqual('black');
 });
 
 test('should change inactive color when using inactive-color prop', () => {
@@ -57,7 +57,7 @@ test('should change inactive color when using inactive-color prop', () => {
     },
   });
 
-  expect(wrapper.element.style.backgroundColor).toEqual('black');
+  expect(wrapper.style.backgroundColor).toEqual('black');
 });
 
 test('should apply active color to loading icon', () => {
@@ -92,7 +92,7 @@ test('should change size when using size prop', () => {
     },
   });
 
-  expect(wrapper.element.style.fontSize).toEqual('20px');
+  expect(wrapper.style.fontSize).toEqual('20px');
 });
 
 test('should allow to custom active-value and inactive-value', () => {

src/tab/test/index.legacy.js

@@ -241,7 +241,7 @@ test('title-style prop', () => {
     `,
   });
 
-  expect(wrapper.find('.van-tab').element.style.color).toEqual('red');
+  expect(wrapper.find('.van-tab').style.color).toEqual('red');
 });
 
 test('dot prop', () => {

src/tabbar/test/index.spec.tsx

@@ -11,7 +11,7 @@ function getMockRouter() {
     name: '/',
     path: '/',
   });
-  const push = (val) => {
+  const push = (val: unknown) => {
     if (typeof val === 'string') {
       $route.name = val;
       $route.path = val;

src/tag/test/index.spec.ts

@@ -1,5 +1,5 @@
 import Tag from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('should emit close event when clicking the close icon', () => {
   const wrapper = mount(Tag, {

src/toast/test/index.spec.js

@@ -1,6 +1,6 @@
 import Toast from '../Toast';
-import { mount } from '@vue/test-utils';
+import { mount , later } from '../../../test';
-import { later } from '../../../test';
+
 
 test('should change overlay style after using overlay-style prop', async () => {
   const wrapper = mount(Toast, {
@@ -13,7 +13,7 @@ test('should change overlay style after using overlay-style prop', async () => {
   });
 
   await later();
-  expect(wrapper.find('.van-overlay').element.style.background).toEqual('red');
+  expect(wrapper.find('.van-overlay').style.background).toEqual('red');
 });
 
 test('should close Toast when using closeOnClick prop and clicked', () => {

src/tree-select/test/index.legacy.js

@@ -1,5 +1,5 @@
 import TreeSelect from '..';
-import { mount } from '@vue/test-utils';
+import { mount } from '../../../test';
 
 test('empty list', () => {
   expect(mount(TreeSelect)).toMatchSnapshot();

test/event.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance, nextTick } from 'vue';
-import { VueWrapper } from '@vue/test-utils';
+import { VueWrapper, DOMWrapper } from '@vue/test-utils';
 
 function getTouch(el: Element | Window, x: number, y: number) {
   return {
@@ -18,7 +18,11 @@ function getTouch(el: Element | Window, x: number, y: number) {
 
 // Trigger pointer/touch event
 export function trigger(
-  wrapper: VueWrapper<ComponentPublicInstance> | HTMLElement | Window,
+  wrapper:
+    | VueWrapper<ComponentPublicInstance<any, any, any>>
+    | DOMWrapper<Element>
+    | Element
+    | Window,
   eventName: string,
   x = 0,
   y = 0,
@@ -49,7 +53,10 @@ export function trigger(
 
 // simulate drag gesture
 export function triggerDrag(
-  el: VueWrapper<ComponentPublicInstance> | HTMLElement,
+  el:
+    | VueWrapper<ComponentPublicInstance<any, any, any>>
+    | DOMWrapper<Element>
+    | HTMLElement,
   x = 0,
   y = 0
 ) {