test: add re-render count test

Author: muzea

package.json

@@ -66,6 +66,7 @@
     "@babel/runtime": "^7.20.0",
     "classnames": "^2.2.6",
     "rc-resize-observer": "^1.0.0",
-    "rc-util": "^5.15.0"
+    "rc-util": "^5.15.0",
+    "sinon": "^15.0.1"
   }
 }

tests/props.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import sinon from 'sinon';
 import List from '../src';
 
 describe('Props', () => {
@@ -11,33 +12,47 @@ describe('Props', () => {
     }
 
     const wrapper = mount(
-      <List data={[{ id: 903 }, { id: 1128 }]} itemKey={item => item.id}>
+      <List data={[{ id: 903 }, { id: 1128 }]} itemKey={(item) => item.id}>
         {({ id }) => <ItemComponent>{id}</ItemComponent>}
       </List>,
     );
 
-    expect(
-      wrapper
-        .find('Item')
-        .at(0)
-        .key(),
-    ).toBe('903');
-
-    expect(
-      wrapper
-        .find('Item')
-        .at(1)
-        .key(),
-    ).toBe('1128');
+    expect(wrapper.find('Item').at(0).key()).toBe('903');
+
+    expect(wrapper.find('Item').at(1).key()).toBe('1128');
   });
 
   it('prefixCls', () => {
     const wrapper = mount(
-      <List data={[0]} itemKey={id => id} prefixCls="prefix">
-        {id => <div>{id}</div>}
+      <List data={[0]} itemKey={(id) => id} prefixCls="prefix">
+        {(id) => <div>{id}</div>}
       </List>,
     );
 
     expect(wrapper.find('.prefix-holder-inner').length).toBeTruthy();
   });
+
+  it('no unnecessary re-render', () => {
+    const renderItem = sinon.fake(({ id, key }) => <div key={key}>{id}</div>);
+    const data = [{ id: 1, key: 1 }];
+    function Wrapper() {
+      const [state, setState] = React.useState(0);
+
+      React.useEffect(() => {
+        setState(1);
+      }, []);
+
+      return (
+        <div>
+          <h1>{state}</h1>
+          <List data={data} itemKey="key" prefixCls="prefix">
+            {renderItem}
+          </List>
+        </div>
+      );
+    }
+    const wrapper = mount(<Wrapper />);
+    expect(wrapper.find('h1').text()).toBe('1');
+    expect(renderItem.callCount).toBe(1);
+  });
 });