title: How to unit test a component that has a ref prop
body: <p>How do you unit test a component that has a ref prop ? i'm getting this error</p>
  
  <blockquote>
    <p>● Should render  › should render </p>
  
  <pre><code>TypeError: Cannot add property current, object is not extensible
  </code></pre>
  </blockquote>
  
  <p>I looked at another question <a href="https://stackoverflow.com/questions/39879176/unit-testing-react-component-ref">Unit testing React component ref</a>, but there is no solution for that question.</p>
  
  <p>this is the test </p>
  
  <p><strong>CommentList.test.tsx</strong></p>
  
  <pre><code>import "@testing-library/jest-dom";
  import React from "react";
  import { CommentListComponent as CommentList } from "./CommentList";
  import { render, getByText, queryByText, getAllByTestId } from "@testing-library/react";
  
  const props = {
      user: {},
      postId: null,
      userId: null,
      currentUser: {},
      ref: {},
      comments: [
          {
              author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
              comment_body: "fsfsfsfsfs",
              createdAt: "2020-05-27T14:32:01.682Z",
              gifUrl: "",
              id: 520,
              postId: 28,
              updatedAt: "2020-05-27T14:32:01.682Z",
              userId: 9,
          },
          {
              author: { username: "barnowl", gravatar: "https://api.adorable.io/avatars/400/bf1eed82fbe37add91cb4192e4d14de6.png", bio: null },
              comment_body: "fsfsfsfsfs",
              createdAt: "2020-05-27T14:32:01.682Z",
              gifUrl: "",
              id: 519,
              postId: 27,
              updatedAt: "2020-05-27T14:32:01.682Z",
              userId: 10,
          },
      ],
      deleteComment: jest.fn(),
  };
  describe("Should render &lt;CommentList/&gt;", () =&gt; {
      it("should render &lt;CommentList/&gt;", () =&gt; {
          const commentList = render(&lt;CommentList {...props} /&gt;);
          expect(commentList).toBeTruthy();
      });
  });
  </code></pre>
  
  <p>This is the component. </p>
  
  <p><strong>CommentList.tsx</strong></p>
  
  <pre><code>import React, { Fragment, useState, Ref } from "react";
  import Grid from "@material-ui/core/Grid";
  import OurSecondaryButton from "../../../common/OurSecondaryButton";
  import CommentListContainer from "../commentListContainer/commentListContainer";
  
  function CommentList(props: any, ref: Ref&lt;HTMLDivElement&gt;) {
      const [showMore, setShowMore] = useState&lt;Number&gt;(2);
      const [openModal, setOpenModal] = useState(false);
      const [showLessFlag, setShowLessFlag] = useState&lt;Boolean&gt;(false);
      const the_comments = props.comments.length;
      const inc = showMore as any;
      const min = Math.min(2, the_comments - inc);
      const showComments = (e) =&gt; {
          e.preventDefault();
          if (inc + 2 &amp;&amp; inc &lt;= the_comments) {
              setShowMore(inc + 2);
              setShowLessFlag(true);
          } else {
              setShowMore(the_comments);
          }
      };
      const handleClickOpen = () =&gt; {
          setOpenModal(true);
      };
      const handleCloseModal = () =&gt; {
          setOpenModal(false);
      };
  
      const showLessComments = (e) =&gt; {
          e.preventDefault();
          setShowMore(2);
          setShowLessFlag(false);
      };
      const isBold = (comment) =&gt; {
          return comment.userId === props.userId ? 800 : 400;
      };
      // show comments by recent, and have the latest comment at the bottom, with the previous one just before it.
      const filterComments = props.comments
          .slice(0)
          .sort((a, b) =&gt; {
              const date1 = new Date(a.createdAt) as any;
              const date2 = new Date(b.createdAt) as any;
              return date2 - date1;
          })
          .slice(0, inc)
          .reverse();
  
      const showMoreComments = () =&gt; {
          return filterComments.map((comment, i) =&gt; (
              &lt;div key={i}&gt;
                  &lt;CommentListContainer ref={ref} comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} /&gt;
              &lt;/div&gt;
          ));
      };
      console.log(ref);
      return (
          &lt;Grid&gt;
              &lt;Fragment&gt;
                  &lt;div data-testid="comment-list-div" style={{ margin: "30px 0px" }}&gt;
                      {props.comments.length &gt; 2 ? (
                          &lt;Fragment&gt;
                              {min !== -1 &amp;&amp; min !== -2 ? (
                                  &lt;Fragment&gt;
                                      {min !== 0 ? (
                                          &lt;OurSecondaryButton onClick={(e) =&gt; showComments(e)} component="span" color="secondary"&gt;
                                              View {min !== -1 &amp;&amp; min !== -2 ? min : 0} More Comments
                                          &lt;/OurSecondaryButton&gt;
                                      ) : (
                                          &lt;OurSecondaryButton onClick={(e) =&gt; showLessComments(e)} component="span" color="secondary"&gt;
                                              Show Less Comments
                                          &lt;/OurSecondaryButton&gt;
                                      )}
                                  &lt;/Fragment&gt;
                              ) : (
                                  &lt;OurSecondaryButton onClick={(e) =&gt; showLessComments(e)} component="span" color="secondary"&gt;
                                      Show Less Comments
                                  &lt;/OurSecondaryButton&gt;
                              )}
                          &lt;/Fragment&gt;
                      ) : null}
                  &lt;/div&gt;
              &lt;/Fragment&gt;
              {showLessFlag === true ? (
                  // will show most recent comments below
                  showMoreComments()
              ) : (
                  &lt;Fragment&gt;
                      {/* filter based on first comment  */}
                      {filterComments.map((comment, i) =&gt; (
                          &lt;div key={i}&gt;
                              &lt;CommentListContainer ref={ref} comment={comment} openModal={openModal} handleCloseModal={handleCloseModal} isBold={isBold} handleClickOpen={handleClickOpen} {...props} /&gt;
                          &lt;/div&gt;
                      ))}
                  &lt;/Fragment&gt;
              )}
          &lt;/Grid&gt;
      );
  }
  
  export default React.forwardRef(CommentList) as React.RefForwardingComponent&lt;HTMLDivElement, any&gt;;
  </code></pre>