test: Diff of React 17 & 18 (#41739)

* test: prepare for 17 & 18 diff

* test: prepare for 17 & 18 diff

* test: update snapshot

* test: fix arr check

* test: update snapshot

* test: update snapshot

components/__tests__/__snapshots__/setup.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SetUp.Test diff of React 18 & React 17 1`] = `
+NodeList [
+  <div>
+  bamboo
+  little
+</div>,
+  <div />,
+]
+`;

components/__tests__/setup.test.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render } from '../../tests/utils';
+
+describe('SetUp.Test', () => {
+  it('diff of React 18 & React 17', () => {
+    const { container } = render(
+      <>
+        <div>{['bamboo', '', 'little']}</div>
+        <div>{['', '']}</div>
+      </>,
+    );
+    expect(container.childNodes).toMatchSnapshot();
+  });
+});

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -17661,7 +17661,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
 `;
 
 exports[`ConfigProvider components Menu configProvider 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="config-menu config-menu-root config-menu-inline config-menu-light"
     data-menu-list="true"
@@ -17738,7 +17738,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="config-menu config-menu-root config-menu-inline config-menu-light"
     data-menu-list="true"
@@ -17815,7 +17815,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="config-menu config-menu-root config-menu-inline config-menu-light"
     data-menu-list="true"
@@ -17892,7 +17892,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="config-menu config-menu-root config-menu-inline config-menu-light"
     data-menu-list="true"
@@ -17969,7 +17969,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu configProvider virtual and dropdownMatchSelectWidth 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
     data-menu-list="true"
@@ -18046,7 +18046,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu normal 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
     data-menu-list="true"
@@ -18123,7 +18123,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Menu prefixCls 1`] = `
-HTMLCollection [
+Array [
   <ul
     class="prefix-Menu prefix-Menu-root prefix-Menu-inline prefix-Menu-light"
     data-menu-list="true"
@@ -29333,7 +29333,7 @@ exports[`ConfigProvider components Tags prefixCls 1`] = `
 `;
 
 exports[`ConfigProvider components TimePicker configProvider 1`] = `
-HTMLCollection [
+Array [
   <div
     class="config-picker"
   >
@@ -30746,7 +30746,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
   <div
     class="config-picker config-picker-disabled"
   >
@@ -30794,7 +30794,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
   <div
     class="config-picker config-picker-large"
   >
@@ -32207,7 +32207,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
   <div
     class="config-picker config-picker-middle"
   >
@@ -33620,7 +33620,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker configProvider virtual and dropdownMatchSelectWidth 1`] = `
-HTMLCollection [
+Array [
   <div
     class="ant-picker"
   >
@@ -35033,7 +35033,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker normal 1`] = `
-HTMLCollection [
+Array [
   <div
     class="ant-picker"
   >
@@ -36446,7 +36446,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components TimePicker prefixCls 1`] = `
-HTMLCollection [
+Array [
   <div
     class="prefix-TimePicker"
   >
@@ -38013,7 +38013,7 @@ exports[`ConfigProvider components Timeline prefixCls 1`] = `
 `;
 
 exports[`ConfigProvider components Tooltip configProvider 1`] = `
-HTMLCollection [
+Array [
   <span
     class="config-tooltip-open"
   >
@@ -38042,7 +38042,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
   <span
     class="config-tooltip-open"
   >
@@ -38071,7 +38071,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
   <span
     class="config-tooltip-open"
   >
@@ -38100,7 +38100,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
   <span
     class="config-tooltip-open"
   >
@@ -38129,7 +38129,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip configProvider virtual and dropdownMatchSelectWidth 1`] = `
-HTMLCollection [
+Array [
   <span
     class="ant-tooltip-open"
   >
@@ -38158,7 +38158,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip normal 1`] = `
-HTMLCollection [
+Array [
   <span
     class="ant-tooltip-open"
   >
@@ -38187,7 +38187,7 @@ HTMLCollection [
 `;
 
 exports[`ConfigProvider components Tooltip prefixCls 1`] = `
-HTMLCollection [
+Array [
   <span
     class="prefix-Tooltip-open"
   >

components/space/__tests__/__snapshots__/index.test.tsx.snap

@@ -29,7 +29,7 @@ exports[`Space should render correct with children 1`] = `
 `;
 
 exports[`Space should render width ConfigProvider 1`] = `
-HTMLCollection [
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -91,7 +91,7 @@ HTMLCollection [
 `;
 
 exports[`Space should render width rtl 1`] = `
-HTMLCollection [
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-rtl ant-space-align-center"
   >

tests/setupAfterEnv.ts

@@ -1,7 +1,7 @@
-import { toHaveNoViolations } from 'jest-axe';
 import '@testing-library/jest-dom';
-import format, { plugins } from 'pretty-format';
+import { toHaveNoViolations } from 'jest-axe';
 import jsdom from 'jsdom';
+import format, { plugins } from 'pretty-format';
 import { defaultConfig } from '../components/theme/internal';
 
 // Not use dynamic hashed for test env since version will change hash dynamically.
@@ -25,8 +25,26 @@ if (process.env.LIB_DIR === 'dist') {
   });
 }
 
+function cleanup(node: HTMLElement) {
+  const childList = Array.from(node.childNodes);
+  node.innerHTML = '';
+  childList.forEach((child) => {
+    if (!(child instanceof Text) || child.textContent) {
+      node.appendChild(child);
+    }
+  });
+  return node;
+}
+
 function formatHTML(nodes: any) {
-  const htmlContent = format(nodes, {
+  let cloneNodes: any;
+  if (Array.isArray(nodes) || nodes instanceof HTMLCollection || nodes instanceof NodeList) {
+    cloneNodes = Array.from(nodes).map((node) => cleanup(node.cloneNode(true) as any));
+  } else {
+    cloneNodes = cleanup(nodes.cloneNode(true));
+  }
+
+  const htmlContent = format(cloneNodes, {
     plugins: [plugins.DOMCollection, plugins.DOMElement],
   });