diff --git a/components/affix/__tests__/Affix.test.tsx b/components/affix/__tests__/Affix.test.tsx
index 14d967bbcf..4cc1b24e6b 100644
--- a/components/affix/__tests__/Affix.test.tsx
+++ b/components/affix/__tests__/Affix.test.tsx
@@ -204,19 +204,15 @@ describe('Affix Render', () => {
   it('should apply custom style to Affix', () => {
     const { container } = render(
       <ConfigProvider
-        affix={{
-          className: 'custom-config-affix',
-          style: { background: 'red' },
-        }}
+        affix={{ className: 'custom-config-affix', style: { color: 'rgb(255, 0, 0)' } }}
       >
         <Affix className="custom-affix" offsetTop={10}>
           <Button>top</Button>
         </Affix>
       </ConfigProvider>,
     );
-    const affixElement = container.querySelector('.custom-affix');
-
+    const affixElement = container.querySelector<HTMLElement>('.custom-affix');
     expect(affixElement).toHaveClass('custom-config-affix');
-    expect(affixElement).toHaveStyle('background: red');
+    expect(affixElement).toHaveStyle({ color: 'rgb(255, 0, 0)' });
   });
 });
diff --git a/components/alert/__tests__/index.test.tsx b/components/alert/__tests__/index.test.tsx
index 16d2d0d15e..4750bf4ecc 100644
--- a/components/alert/__tests__/index.test.tsx
+++ b/components/alert/__tests__/index.test.tsx
@@ -267,12 +267,12 @@ describe('Alert', () => {
     const actionElement = document.querySelector<HTMLElement>('.ant-alert-actions');
 
     // check classNames
-    expect(rootElement).toHaveClass('custom-root');
-    expect(iconElement).toHaveClass('custom-icon');
-    expect(sectionElement).toHaveClass('custom-section');
-    expect(titleElement).toHaveClass('custom-title');
-    expect(descriptionElement).toHaveClass('custom-description');
-    expect(actionElement).toHaveClass('custom-actions');
+    expect(rootElement).toHaveClass(customClassNames.root!);
+    expect(iconElement).toHaveClass(customClassNames.icon!);
+    expect(sectionElement).toHaveClass(customClassNames.section!);
+    expect(titleElement).toHaveClass(customClassNames.title!);
+    expect(descriptionElement).toHaveClass(customClassNames.description!);
+    expect(actionElement).toHaveClass(customClassNames.actions!);
 
     // check styles
     expect(rootElement).toHaveStyle({ color: customStyles.root?.color });
diff --git a/components/alert/__tests__/semantic.test.tsx b/components/alert/__tests__/semantic.test.tsx
index 5d71186eb3..96a9c9bdc8 100644
--- a/components/alert/__tests__/semantic.test.tsx
+++ b/components/alert/__tests__/semantic.test.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { clsx } from 'clsx';
 
 import Alert from '..';
 import type { AlertProps } from '..';
@@ -75,13 +76,16 @@ describe('Alert.Semantic', () => {
     const titleElement = document.querySelector<HTMLElement>('.ant-alert-title');
 
     // Check merged classNames
-    expect(rootElement).toHaveClass('context-root component-root');
-    expect(iconElement).toHaveClass('context-icon');
-    expect(titleElement).toHaveClass('component-title');
+    expect(rootElement).toHaveClass(clsx(contextClassNames.root, componentClassNames.root));
+    expect(iconElement).toHaveClass(contextClassNames.icon!);
+    expect(titleElement).toHaveClass(componentClassNames.title!);
 
     // Check merged styles
-    expect(rootElement).toHaveStyle({ margin: '10px', padding: '5px' });
-    expect(iconElement).toHaveStyle({ fontSize: '16px' });
-    expect(titleElement).toHaveStyle({ fontWeight: 'bold' });
+    expect(rootElement).toHaveStyle({
+      margin: contextStyles.root?.margin,
+      padding: componentStyles.root?.padding,
+    });
+    expect(iconElement).toHaveStyle({ fontSize: contextStyles.icon?.fontSize });
+    expect(titleElement).toHaveStyle({ fontWeight: componentStyles.title?.fontWeight });
   });
 });
diff --git a/components/anchor/__tests__/Anchor.test.tsx b/components/anchor/__tests__/Anchor.test.tsx
index ee6281631c..5811261818 100644
--- a/components/anchor/__tests__/Anchor.test.tsx
+++ b/components/anchor/__tests__/Anchor.test.tsx
@@ -995,16 +995,8 @@ describe('Anchor Render', () => {
             <Anchor
               direction={direction}
               items={[
-                {
-                  title: 'part-1',
-                  href: 'part-1',
-                  key: 'part-1',
-                },
-                {
-                  title: 'part-2',
-                  href: 'part-2',
-                  key: 'part-2',
-                },
+                { title: 'part-1', href: 'part-1', key: 'part-1' },
+                { title: 'part-2', href: 'part-2', key: 'part-2' },
               ]}
             />
           </div>
diff --git a/components/auto-complete/__tests__/index.test.tsx b/components/auto-complete/__tests__/index.test.tsx
index 9403762c94..f9fb598e82 100644
--- a/components/auto-complete/__tests__/index.test.tsx
+++ b/components/auto-complete/__tests__/index.test.tsx
@@ -134,32 +134,60 @@ describe('AutoComplete', () => {
       />,
     );
 
-    const root = container.querySelector('.ant-select-auto-complete');
-    const input = container.querySelector('.ant-select-selection-search-input');
-    const prefix = container.querySelector('.ant-select-prefix');
-    const placeholder = container.querySelector('.ant-select-selection-placeholder');
-    const content = container.querySelector('.ant-select-selector');
-    const list = container.querySelector('.rc-virtual-list');
-    const listItem = container.querySelector('.ant-select-item-option');
-    const popup = container.querySelector('.ant-select-dropdown');
+    const root = container.querySelector<HTMLElement>('.ant-select-auto-complete');
+    const input = container.querySelector<HTMLElement>('.ant-select-selection-search-input');
+    const prefix = container.querySelector<HTMLElement>('.ant-select-prefix');
+    const placeholder = container.querySelector<HTMLElement>('.ant-select-selection-placeholder');
+    const content = container.querySelector<HTMLElement>('.ant-select-selector');
+    const list = container.querySelector<HTMLElement>('.rc-virtual-list');
+    const listItem = container.querySelector<HTMLElement>('.ant-select-item-option');
+    const popup = container.querySelector<HTMLElement>('.ant-select-dropdown');
 
     expect(root).toHaveClass(customClassNames.root);
-    if (input) expect(input).toHaveClass(customClassNames.input);
-    if (prefix) expect(prefix).toHaveClass(customClassNames.prefix);
-    if (placeholder) expect(placeholder).toHaveClass(customClassNames.placeholder);
-    if (content) expect(content).toHaveClass(customClassNames.content);
-    if (list) expect(list).toHaveClass(customClassNames.popup.list);
-    if (listItem) expect(listItem).toHaveClass(customClassNames.popup.listItem);
-    if (popup) expect(popup).toHaveClass(customClassNames.popup.root);
+    if (input) {
+      expect(input).toHaveClass(customClassNames.input);
+    }
+    if (prefix) {
+      expect(prefix).toHaveClass(customClassNames.prefix);
+    }
+    if (placeholder) {
+      expect(placeholder).toHaveClass(customClassNames.placeholder);
+    }
+    if (content) {
+      expect(content).toHaveClass(customClassNames.content);
+    }
+    if (list) {
+      expect(list).toHaveClass(customClassNames.popup.list);
+    }
+    if (listItem) {
+      expect(listItem).toHaveClass(customClassNames.popup.listItem);
+    }
+    if (popup) {
+      expect(popup).toHaveClass(customClassNames.popup.root);
+    }
 
     expect(root).toHaveStyle(customStyles.root);
-    if (input) expect(input).toHaveStyle(customStyles.input);
-    if (prefix) expect(prefix).toHaveStyle(customStyles.prefix);
-    if (placeholder) expect(placeholder).toHaveStyle(customStyles.placeholder);
-    if (content) expect(content).toHaveStyle(customStyles.content);
-    if (list) expect(list).toHaveStyle(customStyles.popup.list);
-    if (listItem) expect(listItem).toHaveStyle(customStyles.popup.listItem);
-    if (popup) expect(popup).toHaveStyle(customStyles.popup.root);
+    if (input) {
+      expect(input).toHaveStyle(customStyles.input);
+    }
+    if (prefix) {
+      expect(prefix).toHaveStyle(customStyles.prefix);
+    }
+    if (placeholder) {
+      expect(placeholder).toHaveStyle(customStyles.placeholder);
+    }
+    if (content) {
+      expect(content).toHaveStyle(customStyles.content);
+    }
+    if (list) {
+      expect(list).toHaveStyle(customStyles.popup.list);
+    }
+    if (listItem) {
+      expect(listItem).toHaveStyle(customStyles.popup.listItem);
+    }
+    if (popup) {
+      expect(popup).toHaveStyle(customStyles.popup.root);
+    }
   });
 
   it('deprecated popupClassName', () => {
diff --git a/components/badge/__tests__/ribbon.test.tsx b/components/badge/__tests__/ribbon.test.tsx
index 32e96253ef..4dea0aacea 100644
--- a/components/badge/__tests__/ribbon.test.tsx
+++ b/components/badge/__tests__/ribbon.test.tsx
@@ -104,9 +104,9 @@ describe('Ribbon', () => {
     const contentElement = container.querySelector<HTMLElement>('.ant-ribbon-content');
 
     // check classNames
-    expect(rootElement).toHaveClass('custom-root');
-    expect(indicatorElement).toHaveClass('custom-indicator');
-    expect(contentElement).toHaveClass('custom-content');
+    expect(rootElement).toHaveClass(customClassNames.root);
+    expect(indicatorElement).toHaveClass(customClassNames.indicator);
+    expect(contentElement).toHaveClass(customClassNames.content);
 
     // check styles
     expect(rootElement).toHaveStyle({ color: customStyles.root?.color });
diff --git a/components/breadcrumb/__tests__/Breadcrumb.test.tsx b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
index e69762eebf..7be82afd77 100644
--- a/components/breadcrumb/__tests__/Breadcrumb.test.tsx
+++ b/components/breadcrumb/__tests__/Breadcrumb.test.tsx
@@ -358,8 +358,10 @@ describe('Breadcrumb', () => {
     const item = container.querySelector<HTMLElement>('.custom-item');
     const separator = container.querySelector<HTMLElement>('.ant-breadcrumb-separator');
 
-    expect(root).toHaveClass('custom-root');
-    expect(separator).toHaveClass('custom-separator');
+    expect(root).toHaveClass(customClassNames.root);
+    expect(item).toHaveClass(customClassNames.item);
+    expect(separator).toHaveClass(customClassNames.separator);
+
     expect(root).toHaveStyle({ color: customStyles.root?.color });
     expect(item).toHaveStyle({ color: customStyles.item?.color });
     expect(separator).toHaveStyle({ color: customStyles.separator?.color });
diff --git a/components/card/__tests__/index.test.tsx b/components/card/__tests__/index.test.tsx
index f0704eef61..9dd05228c3 100644
--- a/components/card/__tests__/index.test.tsx
+++ b/components/card/__tests__/index.test.tsx
@@ -222,13 +222,13 @@ describe('Card', () => {
     const coverElement = container.querySelector<HTMLElement>('.ant-card-cover');
 
     // check classNames
-    expect(rootElement).toHaveClass('custom-root');
-    expect(headerElement).toHaveClass('custom-header');
-    expect(bodyElement).toHaveClass('custom-body');
-    expect(extraElement).toHaveClass('custom-extra');
-    expect(titleElement).toHaveClass('custom-title');
-    expect(actionsElement).toHaveClass('custom-actions');
-    expect(coverElement).toHaveClass('custom-cover');
+    expect(rootElement).toHaveClass(customClassNames.root);
+    expect(headerElement).toHaveClass(customClassNames.header);
+    expect(bodyElement).toHaveClass(customClassNames.body);
+    expect(extraElement).toHaveClass(customClassNames.extra);
+    expect(titleElement).toHaveClass(customClassNames.title);
+    expect(actionsElement).toHaveClass(customClassNames.actions);
+    expect(coverElement).toHaveClass(customClassNames.cover);
 
     // check styles
     expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
@@ -282,11 +282,11 @@ describe('Card', () => {
     const titleElement = container.querySelector<HTMLElement>('.ant-card-meta-title');
     const descElement = container.querySelector<HTMLElement>('.ant-card-meta-description');
 
-    expect(rootElement).toHaveClass('custom-root');
-    expect(sectionElement).toHaveClass('custom-section');
-    expect(avatarElement).toHaveClass('custom-avatar');
-    expect(titleElement).toHaveClass('custom-title');
-    expect(descElement).toHaveClass('custom-description');
+    expect(rootElement).toHaveClass(customClassNames.root);
+    expect(sectionElement).toHaveClass(customClassNames.section);
+    expect(avatarElement).toHaveClass(customClassNames.avatar);
+    expect(titleElement).toHaveClass(customClassNames.title);
+    expect(descElement).toHaveClass(customClassNames.description);
 
     expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
     expect(sectionElement).toHaveStyle({ backgroundColor: customStyles.section.backgroundColor });
diff --git a/components/card/__tests__/semantic.test.tsx b/components/card/__tests__/semantic.test.tsx
index 9f4bde9d32..9b1f96a9e8 100644
--- a/components/card/__tests__/semantic.test.tsx
+++ b/components/card/__tests__/semantic.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Button from '../../button';
 import Card from '..';
 import { render } from '../../../tests/utils';
+import Button from '../../button';
 
 describe('Card.Semantic', () => {
   it('should support useMergeSemantic with mergedProps', () => {
@@ -44,12 +44,12 @@ describe('Card.Semantic', () => {
     const extra = container.querySelector('.ant-card-extra');
 
     // Check semantic class names
-    expect(root).toHaveClass('semantic-card-root');
-    expect(header).toHaveClass('semantic-card-header');
-    expect(body).toHaveClass('semantic-card-body');
-    expect(actions).toHaveClass('semantic-card-actions');
-    expect(title).toHaveClass('semantic-card-title');
-    expect(extra).toHaveClass('semantic-card-extra');
+    expect(root).toHaveClass(semanticClassNames.root);
+    expect(header).toHaveClass(semanticClassNames.header);
+    expect(body).toHaveClass(semanticClassNames.body);
+    expect(actions).toHaveClass(semanticClassNames.actions);
+    expect(title).toHaveClass(semanticClassNames.title);
+    expect(extra).toHaveClass(semanticClassNames.extra);
 
     // Check semantic styles
     expect(root).toHaveStyle('background-color: rgb(250, 250, 250)');
@@ -79,6 +79,7 @@ describe('Card.Semantic', () => {
       extra: { color: '#000000' },
       actions: { margin: '8px' },
     });
+
     const { Meta } = Card;
 
     const { container } = render(
@@ -113,6 +114,6 @@ describe('Card.Semantic', () => {
     expect(body).toHaveStyle('padding: 20px');
     expect(actions).toHaveStyle('margin: 8px');
     expect(title).toHaveStyle('font-size: 22px');
-    expect(extra).toHaveStyle(' color: #000000');
+    expect(extra).toHaveStyle('color: #000000');
   });
 });
diff --git a/components/checkbox/__tests__/semantic.test.tsx b/components/checkbox/__tests__/semantic.test.tsx
index 749a770cd4..9d473126dd 100644
--- a/components/checkbox/__tests__/semantic.test.tsx
+++ b/components/checkbox/__tests__/semantic.test.tsx
@@ -28,9 +28,9 @@ describe('Checkbox.Semantic', () => {
     const iconElement = container.querySelector<HTMLElement>('.ant-checkbox');
     const labelElement = container.querySelector<HTMLElement>('.ant-checkbox-label');
 
-    expect(rootElement).toHaveClass('custom-root');
-    expect(iconElement).toHaveClass('custom-icon');
-    expect(labelElement).toHaveClass('custom-label');
+    expect(rootElement).toHaveClass(customClassNames.root);
+    expect(iconElement).toHaveClass(customClassNames.icon);
+    expect(labelElement).toHaveClass(customClassNames.label);
 
     expect(rootElement).toHaveStyle({ backgroundColor: customStyles.root.backgroundColor });
     expect(iconElement).toHaveStyle({ backgroundColor: customStyles.icon.backgroundColor });
diff --git a/components/collapse/__tests__/semantic.test.tsx b/components/collapse/__tests__/semantic.test.tsx
index cab440610e..be6219f2c8 100644
--- a/components/collapse/__tests__/semantic.test.tsx
+++ b/components/collapse/__tests__/semantic.test.tsx
@@ -36,11 +36,11 @@ describe('Collapse.Semantic', () => {
     const iconElement = container.querySelector<HTMLElement>('.ant-collapse-expand-icon');
 
     // check classNames
-    expect(rootElement).toHaveClass('custom-root');
-    expect(headerElement).toHaveClass('custom-header');
-    expect(titleElement).toHaveClass('custom-title');
-    expect(bodyElement).toHaveClass('custom-body');
-    expect(iconElement).toHaveClass('custom-icon');
+    expect(rootElement).toHaveClass(customClassNames.root);
+    expect(headerElement).toHaveClass(customClassNames.header);
+    expect(titleElement).toHaveClass(customClassNames.title);
+    expect(bodyElement).toHaveClass(customClassNames.body);
+    expect(iconElement).toHaveClass(customClassNames.icon);
 
     // check styles
     expect(rootElement).toHaveStyle({ color: customStyles.root.color });
diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx
index ec625118d0..ab98115f85 100644
--- a/components/tabs/__tests__/index.test.tsx
+++ b/components/tabs/__tests__/index.test.tsx
@@ -187,16 +187,16 @@ describe('Tabs', () => {
     const indicator = container.querySelector('.ant-tabs-ink-bar');
     const header = container.querySelector('.ant-tabs-nav');
     const content = container.querySelector('.ant-tabs-tabpane');
-    expect(root).toHaveClass('test-class');
-    expect(item).toHaveClass('test-item');
-    expect(indicator).toHaveClass('test-indicator');
-    expect(header).toHaveClass('test-header');
-    expect(content).toHaveClass('test-content');
-    expect(root).toHaveStyle({ color: 'rgb(255, 0, 0)' });
-    expect(item).toHaveStyle({ color: 'rgb(0, 0, 255)' });
-    expect(indicator).toHaveStyle({ color: 'rgb(255, 255, 0)' });
-    expect(header).toHaveStyle({ color: 'rgb(0, 255, 0)' });
-    expect(content).toHaveStyle({ color: 'rgb(128, 0, 128)' });
+    expect(root).toHaveClass(customClassnames.root);
+    expect(item).toHaveClass(customClassnames.item);
+    expect(indicator).toHaveClass(customClassnames.indicator);
+    expect(header).toHaveClass(customClassnames.header);
+    expect(content).toHaveClass(customClassnames.content);
+    expect(root).toHaveStyle({ color: customStyles.root.color });
+    expect(item).toHaveStyle({ color: customStyles.item.color });
+    expect(indicator).toHaveStyle({ color: customStyles.indicator.color });
+    expect(header).toHaveStyle({ color: customStyles.header.color });
+    expect(content).toHaveStyle({ color: customStyles.content.color });
   });
   describe('Tabs placement transformation', () => {
     let consoleErrorSpy: jest.SpyInstance;
diff --git a/components/tabs/__tests__/semantic.test.tsx b/components/tabs/__tests__/semantic.test.tsx
index 9812989d4e..d10ca94efd 100644
--- a/components/tabs/__tests__/semantic.test.tsx
+++ b/components/tabs/__tests__/semantic.test.tsx
@@ -56,16 +56,16 @@ describe('Tabs.Semantic', () => {
     const indicator = container.querySelector('.ant-tabs-ink-bar');
     const header = container.querySelector('.ant-tabs-nav');
     const content = container.querySelector('.ant-tabs-tabpane');
-    expect(root).toHaveClass('test-class');
-    expect(item).toHaveClass('test-item');
-    expect(indicator).toHaveClass('test-indicator');
-    expect(header).toHaveClass('test-header');
-    expect(content).toHaveClass('test-content');
-    expect(root).toHaveStyle({ color: 'rgb(255, 0, 0)' });
-    expect(item).toHaveStyle({ color: 'rgb(0, 0, 255)' });
-    expect(indicator).toHaveStyle({ color: 'rgb(255, 255, 0)' });
-    expect(header).toHaveStyle({ color: 'rgb(0, 255, 0)' });
-    expect(content).toHaveStyle({ color: 'rgb(128, 0, 128)' });
+    expect(root).toHaveClass(customClassnames.root);
+    expect(item).toHaveClass(customClassnames.item);
+    expect(indicator).toHaveClass(customClassnames.indicator);
+    expect(header).toHaveClass(customClassnames.header);
+    expect(content).toHaveClass(customClassnames.content);
+    expect(root).toHaveStyle({ color: customStyles.root.color });
+    expect(item).toHaveStyle({ color: customStyles.item.color });
+    expect(indicator).toHaveStyle({ color: customStyles.indicator.color });
+    expect(header).toHaveStyle({ color: customStyles.header.color });
+    expect(content).toHaveStyle({ color: customStyles.content.color });
   });
 
   it('support function classNames and styles', () => {
diff --git a/components/theme/__tests__/token.test.tsx b/components/theme/__tests__/token.test.tsx
index 92f3ee46b5..9f872bee8f 100644
--- a/components/theme/__tests__/token.test.tsx
+++ b/components/theme/__tests__/token.test.tsx
@@ -15,7 +15,7 @@ describe('Theme', () => {
   const getHookToken = (config?: ThemeConfig) => {
     let token: any;
     let cssVar: any;
-    const Demo = () => {
+    const Demo: React.FC = () => {
       ({ token, cssVar } = useToken());
       return null;
     };
@@ -244,7 +244,7 @@ describe('Theme', () => {
       </ConfigProvider>,
     );
 
-    expect(container.querySelector('.duration')?.textContent).toEqual('0s');
+    expect(container.querySelector('.duration')?.textContent).toBe('0s');
   });
 
   describe('getDesignToken', () => {
@@ -265,7 +265,7 @@ describe('Theme', () => {
       const token = theme.getDesignToken(config);
       const { token: hookToken } = getHookToken(config);
       expect(token).toEqual(hookToken);
-      expect(token.colorPrimary).toEqual('#189cff');
+      expect(token.colorPrimary).toBe('#189cff');
     });
 
     it('with custom algorithm', () => {
@@ -280,35 +280,35 @@ describe('Theme', () => {
       const token = theme.getDesignToken(config);
       const { token: hookToken } = getHookToken(config);
       expect(token).toEqual(hookToken);
-      expect(token.colorPrimary).toEqual('#1668dc');
+      expect(token.colorPrimary).toBe('#1668dc');
     });
   });
 
   describe('colorLink', () => {
     it('should follow colorPrimary by default', () => {
       const { token } = getHookToken();
-      expect(token.colorLink).toEqual(token.colorInfo);
-      expect(token.colorLinkHover).toEqual(token.colorInfoHover);
-      expect(token.colorLinkActive).toEqual(token.colorInfoActive);
+      expect(token.colorLink).toBe(token.colorInfo);
+      expect(token.colorLinkHover).toBe(token.colorInfoHover);
+      expect(token.colorLinkActive).toBe(token.colorInfoActive);
 
       const { token: token2 } = getHookToken({ token: { colorPrimary: '#189cff' } });
-      expect(token2.colorLink).toEqual(token2.colorInfo);
-      expect(token2.colorLinkHover).toEqual(token2.colorInfoHover);
-      expect(token2.colorLinkActive).toEqual(token2.colorInfoActive);
+      expect(token2.colorLink).toBe(token2.colorInfo);
+      expect(token2.colorLinkHover).toBe(token2.colorInfoHover);
+      expect(token2.colorLinkActive).toBe(token2.colorInfoActive);
       // colorInfo should not follow colorPrimary
-      expect(token2.colorLink).not.toEqual('#189cff');
+      expect(token2.colorLink).not.toBe('#189cff');
 
       const { token: token3 } = getHookToken({ algorithm: [theme.darkAlgorithm] });
-      expect(token3.colorLink).toEqual(token3.colorInfo);
-      expect(token3.colorLinkHover).toEqual(token3.colorInfoHover);
-      expect(token3.colorLinkActive).toEqual(token3.colorInfoActive);
+      expect(token3.colorLink).toBe(token3.colorInfo);
+      expect(token3.colorLinkHover).toBe(token3.colorInfoHover);
+      expect(token3.colorLinkActive).toBe(token3.colorInfoActive);
     });
 
     it('should be calculated correctly', () => {
       const { token } = getHookToken({ token: { colorLink: '#189cff' } });
-      expect(token.colorLink).toEqual('#189cff');
-      expect(token.colorLinkHover).toEqual('#69c8ff');
-      expect(token.colorLinkActive).toEqual('#0978d9');
+      expect(token.colorLink).toBe('#189cff');
+      expect(token.colorLinkHover).toBe('#69c8ff');
+      expect(token.colorLinkActive).toBe('#0978d9');
     });
   });
 
@@ -336,8 +336,8 @@ describe('Theme', () => {
 
   it('get cssVar from useToken', () => {
     const { cssVar } = getHookToken();
-    expect(cssVar.colorLink).toEqual('var(--ant-color-link)');
-    expect(cssVar.colorLinkHover).toEqual('var(--ant-color-link-hover)');
-    expect(cssVar.colorLinkActive).toEqual('var(--ant-color-link-active)');
+    expect(cssVar.colorLink).toBe('var(--ant-color-link)');
+    expect(cssVar.colorLinkHover).toBe('var(--ant-color-link-hover)');
+    expect(cssVar.colorLinkActive).toBe('var(--ant-color-link-active)');
   });
 });
diff --git a/components/tooltip/__tests__/semantic.test.tsx b/components/tooltip/__tests__/semantic.test.tsx
index 58d1665cf2..8e49c8eacb 100644
--- a/components/tooltip/__tests__/semantic.test.tsx
+++ b/components/tooltip/__tests__/semantic.test.tsx
@@ -25,8 +25,8 @@ describe('Tooltip.Semantic', () => {
     const tooltipElement = container.querySelector('.ant-tooltip');
     const tooltipInner = container.querySelector('.ant-tooltip-container');
 
-    expect(tooltipElement).toHaveClass('custom-root');
-    expect(tooltipInner).toHaveClass('custom-container');
+    expect(tooltipElement).toHaveClass(classNames.root!);
+    expect(tooltipInner).toHaveClass(classNames.container!);
     expect(tooltipElement).toHaveStyle('background-color: rgb(255, 0, 0)');
     expect(tooltipInner).toHaveStyle('color: rgb(0, 0, 255)');
   });
diff --git a/components/tooltip/__tests__/tooltip.test.tsx b/components/tooltip/__tests__/tooltip.test.tsx
index b00bc2bbf2..43df1dc908 100644
--- a/components/tooltip/__tests__/tooltip.test.tsx
+++ b/components/tooltip/__tests__/tooltip.test.tsx
@@ -523,8 +523,8 @@ describe('Tooltip', () => {
     const tooltipContainerElement = container.querySelector<HTMLElement>('.ant-tooltip-container');
 
     // 验证 classNames
-    expect(tooltipElement).toHaveClass('custom-root');
-    expect(tooltipContainerElement).toHaveClass('custom-container');
+    expect(tooltipElement).toHaveClass(customClassNames.root);
+    expect(tooltipContainerElement).toHaveClass(customClassNames.container);
 
     // 验证 styles
     expect(tooltipElement).toHaveStyle({ padding: '20px' });
diff --git a/components/transfer/__tests__/index.test.tsx b/components/transfer/__tests__/index.test.tsx
index b838566979..942f2b47a5 100644
--- a/components/transfer/__tests__/index.test.tsx
+++ b/components/transfer/__tests__/index.test.tsx
@@ -614,12 +614,12 @@ describe('Transfer', () => {
     const actionsElement = container.querySelector<HTMLElement>('.ant-transfer-actions');
 
     // check classNames
-    expect(rootElement).toHaveClass('custom-transfer-root');
-    expect(sectionElements[0]).toHaveClass('custom-transfer-section');
-    expect(sectionElements[1]).toHaveClass('custom-transfer-section');
-    expect(headerElements[0]).toHaveClass('custom-transfer-header');
-    expect(headerElements[1]).toHaveClass('custom-transfer-header');
-    expect(actionsElement).toHaveClass('custom-transfer-actions');
+    expect(rootElement).toHaveClass(customClassNames.root!);
+    expect(sectionElements[0]).toHaveClass(customClassNames.section!);
+    expect(sectionElements[1]).toHaveClass(customClassNames.section!);
+    expect(headerElements[0]).toHaveClass(customClassNames.header!);
+    expect(headerElements[1]).toHaveClass(customClassNames.header!);
+    expect(actionsElement).toHaveClass(customClassNames.actions!);
 
     // check styles
     expect(rootElement).toHaveStyle({ color: customStyles.root?.color });