title: Can I manually trigger a state change when testing using react-testing-library?
body: <p>I'm still in the process of moving my Enzyme tests over to react-testing-library, and I have a fairly common scenario where, when a component mounts, it kicks off an Ajax request to get some data. Just before the fetch starts, it sets some state value to indicate it is loading, which in turn renders a spinner. When it's finished, the state is updated with both the data, and "loadingState" is set to "Completed" or "Failed", where appropriate. </p>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import { SwapSpinner } from "react-spinners-kit";
  import styled from "styled-components";
  import * as R from "ramda";
  
  import { getPeople } from "./getPeople";
  
  const FlexCenter = styled.div`
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
  `;
  
  const loadingStates = {
    notStarted: "notStarted",
    isLoading: "isLoading",
    success: "success",
    failure: "failure"
  };
  
  function App() {
    const [people, setPeople] = useState([]);
    const [isLoading, setLoading] = useState(loadingStates.notStarted);
  
    useEffect(() =&gt; {
      setLoading(loadingStates.isLoading);
      getPeople()
        .then(({ results }) =&gt; {
          setPeople(results);
          setLoading(loadingStates.success);
        })
        .catch(error =&gt; {
          setLoading(loadingStates.failure);
        });
    }, []);
  
    return (
      &lt;div&gt;
        {R.cond([
          [
            R.equals(loadingStates.isLoading),
            () =&gt; (
              &lt;FlexCenter data-testid="spinner"&gt;
                &lt;SwapSpinner /&gt;
              &lt;/FlexCenter&gt;
            )
          ],
          [
            R.equals(loadingStates.success),
            () =&gt; (
              &lt;ul data-testid="people-list"&gt;
                {people.map(({ name }) =&gt; (
                  &lt;li key={name}&gt;{name}&lt;/li&gt;
                ))}
              &lt;/ul&gt;
            )
          ],
          [R.equals(loadingStates.failure), &lt;div&gt;An error occured&lt;/div&gt;]
        ])(isLoading)}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>With Enzyme, I could manually set the state to any one of the <code>loadingStates</code> keys, and assert that the render conditional renders the appropriate changes. </p>
  
  <p>Is there a way that I can do this in RTL? </p>