diff --git a/src/checkbox/test/index.spec.js b/src/checkbox/test/index.spec.js
index 84a3259e9..8ac51471a 100644
--- a/src/checkbox/test/index.spec.js
+++ b/src/checkbox/test/index.spec.js
@@ -47,9 +47,7 @@ test('should render "van-checkbox--label-disabled" class when using label-disabl
     },
   });
 
-  expect(
-    wrapper.element.classList.contains('van-checkbox--label-disabled')
-  ).toBeTruthy();
+  expect(wrapper.classes()).toContain('van-checkbox--label-disabled');
 });
 
 test('should emit "update:modelValue" event when label is clicked', () => {
diff --git a/src/overlay/test/index.spec.js b/src/overlay/test/index.spec.js
index 6138ffdfe..e3a67af36 100644
--- a/src/overlay/test/index.spec.js
+++ b/src/overlay/test/index.spec.js
@@ -21,8 +21,8 @@ test('should allow to custom class name with class-name prop', () => {
     },
   });
 
-  const overlay = wrapper.find('.van-overlay').element;
-  expect(overlay.classList.contains('foo')).toBeTruthy();
+  const overlay = wrapper.find('.van-overlay');
+  expect(overlay.classes()).toContain('foo');
 });
 
 test('should allow to custom style with custom-style prop', () => {
diff --git a/src/stepper/test/index.spec.js b/src/stepper/test/index.spec.js
index 2e36015a0..dac25dbac 100644
--- a/src/stepper/test/index.spec.js
+++ b/src/stepper/test/index.spec.js
@@ -68,10 +68,12 @@ test('should emit overlimit event when clicking disabled buttons', async () => {
 
 test('should disable plus button when disable-plus prop is true', async () => {
   const wrapper = mount(Stepper);
-  const plus = wrapper.find('.van-stepper__plus').element;
-  expect(plus.classList.contains('van-stepper__plus--disabled')).toBeFalsy();
+  const plus = wrapper.find('.van-stepper__plus');
+
+  expect(plus.classes()).not.toContain('van-stepper__plus--disabled');
+
   await wrapper.setProps({ disablePlus: true });
-  expect(plus.classList.contains('van-stepper__plus--disabled')).toBeTruthy();
+  expect(plus.classes()).toContain('van-stepper__plus--disabled');
 });
 
 test('should disable minus button when disable-minus prop is true', async () => {
@@ -80,10 +82,12 @@ test('should disable minus button when disable-minus prop is true', async () =>
       modelValue: 2,
     },
   });
-  const minus = wrapper.find('.van-stepper__minus').element;
-  expect(minus.classList.contains('van-stepper__minus--disabled')).toBeFalsy();
+
+  const minus = wrapper.find('.van-stepper__minus');
+  expect(minus.classes()).not.toContain('van-stepper__minus--disabled');
+
   await wrapper.setProps({ disableMinus: true });
-  expect(minus.classList.contains('van-stepper__minus--disabled')).toBeTruthy();
+  expect(minus.classes()).toContain('van-stepper__minus--disabled');
 });
 
 test('should limit max value when using max prop', async () => {
diff --git a/src/tabbar/test/index.spec.js b/src/tabbar/test/index.spec.js
index e83433f94..2a8e58bc1 100644
--- a/src/tabbar/test/index.spec.js
+++ b/src/tabbar/test/index.spec.js
@@ -1,5 +1,6 @@
 import { nextTick, reactive, ref } from 'vue';
 import { mount, later, mockGetBoundingClientRect } from '../../../test';
+import { BORDER_TOP_BOTTOM } from '../../utils/constant';
 import Tabbar from '..';
 import TabbarItem from '../../tabbar-item';
 
@@ -56,16 +57,16 @@ test('should match active tab by route path in route mode', async () => {
 
   const items = wrapper.findAll('.van-tabbar-item');
 
-  expect(items[0].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[0].classes()).toContain(activeClass);
 
   await items[1].trigger('click');
-  expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[1].classes()).toContain(activeClass);
 
   await items[2].trigger('click');
-  expect(items[2].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[2].classes()).toContain(activeClass);
 
   await items[3].trigger('click');
-  expect(items[2].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[3].classes()).not.toContain(activeClass);
 });
 
 test('should match active tab by route name in route mode', async () => {
@@ -88,10 +89,10 @@ test('should match active tab by route name in route mode', async () => {
   const items = wrapper.findAll('.van-tabbar-item');
 
   await items[0].trigger('click');
-  expect(items[0].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[0].classes()).toContain(activeClass);
 
   await items[1].trigger('click');
-  expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[1].classes()).toContain(activeClass);
 });
 
 test('should watch model-value and update active tab', async () => {
@@ -119,7 +120,7 @@ test('should watch model-value and update active tab', async () => {
   wrapper.vm.updateActive();
   await nextTick();
   const items = wrapper.findAll('.van-tabbar-item');
-  expect(items[1].element.classList.contains(activeClass)).toBeTruthy();
+  expect(items[1].classes()).toContain(activeClass);
 });
 
 test('should match active tab by name when using name prop', () => {
@@ -152,9 +153,7 @@ test('should not render border when border prop is false', () => {
     },
   });
 
-  expect(
-    wrapper.element.classList.contains('van-hairline--top-bottom')
-  ).toBeFalsy();
+  expect(wrapper.classes()).not.toContain(BORDER_TOP_BOTTOM);
 });
 
 test('should render placeholder element when using placeholder prop', async () => {