title: Rendering a React component in a Jest test returns undefined
body: <p>I have been trying to create a test with React, with the component TodoItems. It is just a regular Todolist with some basic features. When the test runs, it gives an error saying todos is undefined. The code in the test itself doesn't work as a result.</p>
  
  <p>Test:</p>
  
  <pre><code>it("Tasks length increased by one when task is added.", () =&gt; {
    const { todos } = render(&lt;TodoItems /&gt;);
    const todoLen = getByTestId(todos, "tasks");
  
    console.log(todos);
    expect(todoLen.toBe(1));
  });
  </code></pre>
  
  <p>Component tested:</p>
  
  <pre><code>export default function Tasks() {
    let [tasks, setTasks] = useState([
      {
        content: "(Dette er en eksempelopppgave) "
      }
    ]);
  
    useEffect(() =&gt; {
      fetch("http://localhost:8080/all", {
        crossDomain: true,
        method: "GET",
        mode: "no-cors",
        credentials: "include"
      })
        .then(res =&gt; res.json())
        .then(function(response) {
          console.log("TodoItems is fetching.. ", response);
          if (response.status !== 200) {
            console.log("Fetching failed, response status: " + response.status);
            return;
          }
          response.json().then(function(data) {
            //was data instead of tasks, testing
            console.log(data, " is a response");
          });
        })
        .catch(function(err) {
          console.log("Fetch error: ", err);
        });
    }, []);
  
    // });
  
    let handleAddTask = task =&gt; {
      setTasks(tasks.concat(task));
      console.log("handleAddTask content: " + JSON.stringify(task));
    };
  
    let handleDeleteTask = id =&gt; {
      setTasks(tasks.filter(task =&gt; task.id !== id));
    };
  
    return (
      &lt;div className="Tasks"&gt;
        &lt;h2&gt;Tasks&lt;/h2&gt;
        &lt;TaskList deleteTask={handleDeleteTask} tasks={tasks} /&gt;
        &lt;TaskForm addTask={handleAddTask} /&gt;
        &lt;Button onClick={reqListener}&gt;Load&lt;/Button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Edit(complete test code):</p>
  
  <pre><code>import React from "react";
  import renderer from "react-test-renderer";
  import TodoItems from "../components/TodoItems.js";
  import { render, fireEvent, getByTestId } from "@testing-library/react";
  import App from "../App.js";
  
  //Test for the tasks array.
  it("Tasks length increased by one when task is added.", () =&gt; {
    const { container, getByTestId } = render(&lt;TodoItems /&gt;);
    const todos = getByTestId("tasks");
  
    expect(container).toBeDefined();
    expect(todos).toHaveLength(1);
  });
  </code></pre>