fix(test): Jest with ES Modules of react-dnd (#17607)

.jest.js

@@ -2,7 +2,7 @@ const libDir = process.env.LIB_DIR;
 
 const transformIgnorePatterns = [
   '/dist/',
-  'node_modules/(?!(_react-dnd|react-dnd|_dnd-core|dnd-core))[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
+  'node_modules/[^/]+?/(?!(es|node_modules)/)', // Ignore modules without es dir
 ];
 
 module.exports = {
@@ -10,6 +10,14 @@ module.exports = {
   setupFiles: ['./tests/setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
   modulePathIgnorePatterns: ['/_site/'],
+  moduleNameMapper: {
+    '^dnd-core$': 'dnd-core/dist/cjs',
+    '^react-dnd$': 'react-dnd/dist/cjs',
+    '^react-dnd-html5-backend$': 'react-dnd-html5-backend/dist/cjs',
+    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
+    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
+    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
+  },
   testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node'],
   transform: {
     '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',

.jest.node.js

@@ -1,9 +1,10 @@
-const { transformIgnorePatterns } = require('./.jest');
+const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
 
 // jest config for server render environment
 module.exports = {
   setupFiles: ['./tests/setup.js'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'md'],
+  moduleNameMapper,
   transform: {
     '\\.tsx?$': './node_modules/antd-tools/lib/jest/codePreprocessor',
     '\\.js$': './node_modules/antd-tools/lib/jest/codePreprocessor',

components/descriptions/__tests__/__snapshots__/demo.test.js.snap

@@ -278,7 +278,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
 exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
 <div>
   <div
-    class="ant-descriptions"
+    class="ant-descriptions ant-descriptions-bordered"
   >
     <div
       class="ant-descriptions-title"
@@ -293,115 +293,88 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
           <tr
             class="ant-descriptions-row"
           >
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Product
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               Cloud Database
-              </span>
             </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Billing
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               Prepaid
-              </span>
             </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               time
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               18:00:00
-              </span>
             </td>
           </tr>
           <tr
             class="ant-descriptions-row"
           >
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Amount
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               $80.00
-              </span>
             </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Discount
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               $20.00
-              </span>
             </td>
-            <td
-              class="ant-descriptions-item"
-              colspan="1"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Official
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="1"
             >
               $60.00
-              </span>
             </td>
           </tr>
           <tr
             class="ant-descriptions-row"
           >
-            <td
-              class="ant-descriptions-item"
-              colspan="3"
-            >
-              <span
+            <th
               class="ant-descriptions-item-label"
             >
               Config Info
-              </span>
-              <span
+            </th>
+            <td
               class="ant-descriptions-item-content"
+              colspan="5"
             >
               Data disk type: MongoDB
               <br />
@@ -414,7 +387,6 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
               Replication_factor:3
               <br />
               Region: East China 1
-              </span>
             </td>
           </tr>
         </tbody>