title: Render same component in beforeAll/beforeEvery: testing-library/react
body: <p>I'm testing different things in a single component in separate tests. I want to not have to write render inside every single <code>test</code>, but the code underneath does not work.</p>
  <p>I have understood that the cleanup function clears the rendered component after each test, so that is good.</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import { Router } from &quot;react-router-dom&quot;;
  import { render } from &quot;@testing-library/react&quot;;
  import &quot;@testing-library/jest-dom&quot;;
  
  import myComp from './myComp'
  
  const renderComponent = () =&gt; {
    return render(&lt;myComp /&gt;);
  };
  
  describe(&quot;desc&quot;, () =&gt; {
    beforeEach(() =&gt; {
     const {getAllByText, getByText, getByRole} = renderComponent()
    });
  
    test(&quot;1&quot;, () =&gt; {
        console.log(getAllByText) // not defined
    });
  
    test(&quot;2&quot;, () =&gt; {
        console.log(getAllByText) // not defined
  
    });
  
  })
  </code></pre>
  <p>The setup above results in the error:</p>
  <pre><code>ReferenceError: getAllByText is not defined
  </code></pre>
  <p>My current workaround is to include <code>renderComponent()</code> function call in each <code>test</code>, but this does not look so clean.</p>
  <pre class="lang-js prettyprint-override"><code>test(&quot;1&quot;, () =&gt; {
      const {getAllByText, getByText, getByRole} = renderComponent()
  });
  
  </code></pre>
  <h1>Attempt:</h1>
  <pre><code>let result;
  beforeEach(() =&gt; {
      result = renderComponent();
      }
  test(&quot;renders success state&quot;, () =&gt; {
      const { getByText } = result;
      expect(getByText(noAccess)).toBeInTheDocument();
      expect(getByText(applyForAccessButton)).toBeInTheDocument();});
  </code></pre>
  <p>Error I get then is:</p>
  <pre><code>    TypeError: Cannot read property 'getByText' of undefined
  </code></pre>