fix: warning of useless components (#16)

* test: clean up

* fix: warning of extract

* chore: fix eslint conflict

Author: zombieJ

package.json

@@ -45,7 +45,7 @@
     "antd": "^5.8.5",
     "cross-env": "^7.0.1",
     "dumi": "^2.1.0",
-    "eslint": "^7.0.0",
+    "eslint": "^8.0.0",
     "father": "^4.0.0",
     "less": "^3.10.3",
     "np": "^6.2.0",

src/index.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import {
   createCache,
   extractStyle as extStyle,
   StyleProvider,
 } from '@ant-design/cssinjs';
 import * as antd from 'antd';
+import React from 'react';
 import { renderToString } from 'react-dom/server';
 import type { CustomRender } from './interface';
+
 const blackList: string[] = [
   'ConfigProvider',
   'Drawer',
@@ -18,6 +19,26 @@ const blackList: string[] = [
   'Tour',
 ];
 
+const ComponentCustomizeRender: Record<
+  string,
+  (component: React.ComponentType<any>) => React.ReactNode
+> = {
+  Affix: (Affix) => (
+    <Affix>
+      <div />
+    </Affix>
+  ),
+  BackTop: () => <antd.FloatButton.BackTop />,
+  Dropdown: (Dropdown) => (
+    <Dropdown menu={{ items: [] }}>
+      <div />
+    </Dropdown>
+  ),
+  Menu: (Menu) => <Menu items={[]} />,
+  QRCode: (QRCode) => <QRCode value="https://ant.design" />,
+  Tree: (Tree) => <Tree treeData={[]} />,
+};
+
 const defaultNode = () => (
   <>
     {Object.keys(antd)
@@ -27,16 +48,15 @@ const defaultNode = () => (
       )
       .map((compName) => {
         const Comp = antd[compName];
-        if (compName === 'Dropdown') {
+
+        const renderFunc = ComponentCustomizeRender[compName];
+
+        if (renderFunc) {
           return (
-            <Comp
-              key={compName}
-              menu={{ items: [] }}
-            >
-                <div />
-            </Comp>
+            <React.Fragment key={compName}>{renderFunc(Comp)}</React.Fragment>
           );
         }
+
         return <Comp key={compName} />;
       })}
   </>

tests/__snapshots__/index.test.tsx.snap

@@ -1,14 +1,15 @@
 import { StyleProvider } from '@ant-design/cssinjs';
-import { extractStyle } from '../src/index';
 import { ConfigProvider } from 'antd';
+import { extractStyle } from '../src/index';
 
 const testGreenColor = '#008000';
 describe('Static-Style-Extract', () => {
   it('should extract static styles', () => {
     const cssText = extractStyle();
     expect(cssText).not.toContain(testGreenColor);
-    expect(cssText).toMatchSnapshot();
+    expect(cssText).toContain('.ant-btn');
   });
+
   it('should extract static styles with customTheme', () => {
     const cssText = extractStyle((node) => (
       <ConfigProvider
@@ -22,27 +23,24 @@ describe('Static-Style-Extract', () => {
       </ConfigProvider>
     ));
     expect(cssText).toContain(testGreenColor);
-    expect(cssText).toMatchSnapshot();
   });
+
   it('with custom hashPriority', () => {
-    const cssText = extractStyle(
-      (node) => (
-        <StyleProvider hashPriority='high'>
-          <ConfigProvider
-            theme={{
-              token: {
-                colorPrimary: testGreenColor,
-              },
-            }}
-          >
-            {node}
-          </ConfigProvider>
-        </StyleProvider>
-      )
-    );
+    const cssText = extractStyle((node) => (
+      <StyleProvider hashPriority="high">
+        <ConfigProvider
+          theme={{
+            token: {
+              colorPrimary: testGreenColor,
+            },
+          }}
+        >
+          {node}
+        </ConfigProvider>
+      </StyleProvider>
+    ));
     expect(cssText).toContain(testGreenColor);
     expect(cssText).not.toContain(':where');
-    expect(cssText).toMatchSnapshot();
 
     const cssText2 = extractStyle((node) => (
       <ConfigProvider

tests/index.test.tsx

@@ -0,0 +1,20 @@
+import { extractStyle } from '../src/index';
+
+// Spy useLayoutEffect to avoid warning
+jest.mock('react', () => {
+  const oriReact = jest.requireActual('react');
+  return {
+    ...oriReact,
+    useLayoutEffect: oriReact.useEffect,
+  };
+});
+
+describe('Static-Style-Extract.SSR', () => {
+  it('not warning', () => {
+    const errSpy = jest.spyOn(console, 'error');
+
+    extractStyle();
+
+    expect(errSpy).not.toHaveBeenCalled();
+  });
+});