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,128 +293,100 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
           <tr
             class="ant-descriptions-row"
           >
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Product
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              Cloud Database
-                class="ant-descriptions-item-label"
-              >
-                Product
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                Cloud Database
-              </span>
             </td>
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Billing
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              Prepaid
-                class="ant-descriptions-item-label"
-              >
-                Billing
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                Prepaid
-              </span>
             </td>
+            <th
+              class="ant-descriptions-item-label"
+            >
+              time
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              18:00:00
-                class="ant-descriptions-item-label"
-              >
-                time
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                18:00:00
-              </span>
             </td>
           </tr>
           <tr
             class="ant-descriptions-row"
           >
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Amount
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              $80.00
-                class="ant-descriptions-item-label"
-              >
-                Amount
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                $80.00
-              </span>
             </td>
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Discount
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              $20.00
-                class="ant-descriptions-item-label"
-              >
-                Discount
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                $20.00
-              </span>
             </td>
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Official
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
               colspan="1"
             >
-              <span
+              $60.00
-                class="ant-descriptions-item-label"
-              >
-                Official
-              </span>
-              <span
-                class="ant-descriptions-item-content"
-              >
-                $60.00
-              </span>
             </td>
           </tr>
           <tr
             class="ant-descriptions-row"
           >
+            <th
+              class="ant-descriptions-item-label"
+            >
+              Config Info
+            </th>
             <td
-              class="ant-descriptions-item"
+              class="ant-descriptions-item-content"
-              colspan="3"
+              colspan="5"
             >
-              <span
+              Data disk type: MongoDB
-                class="ant-descriptions-item-label"
+              <br />
-              >
+              Database version: 3.4
-                Config Info
+              <br />
-              </span>
+              Package: dds.mongo.mid
-              <span
+              <br />
-                class="ant-descriptions-item-content"
+              Storage space: 10 GB
-              >
+              <br />
-                Data disk type: MongoDB
+              Replication_factor:3
-                <br />
+              <br />
-                Database version: 3.4
+              Region: East China 1
-                <br />
-                Package: dds.mongo.mid
-                <br />
-                Storage space: 10 GB
-                <br />
-                Replication_factor:3
-                <br />
-                Region: East China 1
-              </span>
             </td>
           </tr>
         </tbody>