fix: responsiveObserve init miss sizing (#20400)

* fix: init miss sizing

* update mock test

components/_util/responsiveObserve.ts

@@ -77,6 +77,8 @@ const responsiveObserve = {
         mql,
         listener,
       };
+
+      listener(mql);
     });
   },
 };

components/descriptions/__tests__/index.test.js

@@ -10,15 +10,6 @@ describe('Descriptions', () => {
 
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-  jest.spyOn(window, 'matchMedia').mockImplementationOnce(query => ({
-    addListener: (listener) => {
-      if (query === '(max-width: 575px)') {
-        listener({ matches: true });
-      }
-    },
-    removeListener: jest.fn(),
-  }));
-
   afterEach(() => {
     MockDate.reset();
     errorSpy.mockReset();

components/grid/__tests__/index.test.js

@@ -3,15 +3,6 @@ import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
 
-jest.spyOn(window, 'matchMedia').mockImplementationOnce(query => ({
-  addListener: (listener) => {
-    if (query === '(max-width: 575px)') {
-      listener({ matches: true });
-    }
-  },
-  removeListener: jest.fn(),
-}));
-
 describe('Grid', () => {
   mountTest(Row);
   mountTest(Col);

tests/setup.js

@@ -12,10 +12,10 @@ if (typeof window !== 'undefined') {
   };
   global.window.scrollTo = () => {};
   // ref: https://github.com/ant-design/ant-design/issues/18774
-  if (!global.window.matchMedia) {
+  if (!window.matchMedia) {
     Object.defineProperty(global.window, 'matchMedia', {
-      value: jest.fn(() => ({
+      value: jest.fn(query => ({
-        matches: true,
+        matches: query.includes('max-width'),
         addListener: () => {},
         removeListener: () => {},
       })),