test: fix virtual list snapshoting (#572)

Author: Amin Mahboubi

src/components/MessageList/__tests__/VirtualizedMessageList.test.js

@@ -22,7 +22,7 @@ jest.mock('react-virtuoso', () => {
   const { forwardRef } = jest.requireActual('react');
   return {
     Virtuoso: forwardRef((props, ref) => (
-      <Virtuoso ref={ref} {...props} initialItemCount={10} />
+      <Virtuoso ref={ref} {...props} initialItemCount={20} />
     )),
   };
 });
@@ -50,7 +50,7 @@ async function createChannel() {
   const mockedChannel = generateChannel({
     members: [generateMember({ user: user1 }), generateMember({ user: user2 })],
     messages: ' '
-      .repeat(100)
+      .repeat(20)
       .split(' ')
       .map((v, i) => generateMessage({ user: i % 3 ? user1 : user2 })),
   });

src/components/MessageList/__tests__/__snapshots__/VirtualizedMessageList.test.js.snap

@@ -242,40 +242,13 @@ exports[`VirtualizedMessageList should render empty list of messages 1`] = `
                 false
               </div>
             </div>
-            <div
-              data-index={21}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                false
-              </div>
-            </div>
-            <div
-              data-index={22}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                false
-              </div>
-            </div>
-            <div
-              data-index={23}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                false
-              </div>
-            </div>
             <footer />
           </div>
         </div>
         <div
           style={
             Object {
-              "height": "3030px",
+              "height": "630px",
               "position": "absolute",
               "top": 0,
             }
@@ -542,33 +515,6 @@ exports[`VirtualizedMessageList should render empty list of messages with messag
                 true
               </div>
             </div>
-            <div
-              data-index={21}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                false
-              </div>
-            </div>
-            <div
-              data-index={22}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                false
-              </div>
-            </div>
-            <div
-              data-index={23}
-              data-known-size={30}
-            >
-              <div>
-                FixedHeightMessage groupedByUser:
-                true
-              </div>
-            </div>
             <footer>
               <div>
                 TypingIndicator
@@ -579,7 +525,7 @@ exports[`VirtualizedMessageList should render empty list of messages with messag
         <div
           style={
             Object {
-              "height": "3030px",
+              "height": "630px",
               "position": "absolute",
               "top": 0,
             }