title: How to test state management(Recoil) using react jest?
body: <p>How do I test recoil using react jest?<br />
  I expect below test is going to be success but it gives me fail.<br />
  Any way to render the status of <code>isLogin: false</code> using jest?</p>
  <pre class="lang-js prettyprint-override"><code>// src/state/user.ts
  
  import { atom } from &quot;recoil&quot;;
  
  export type UserType = {
    isLogin: boolean;
  };
  
  const userState = atom&lt;UserType&gt;({
    key: &quot;user&quot;,
    default: {
      isLogin: true,
    },
  });
  
  export default userState;
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// src/pages/user/User.tsx
  
  import { useNavigate, useParams } from &quot;react-router-dom&quot;;
  import { useRecoilValue } from &quot;recoil&quot;;
  import userState from &quot;../../state/user&quot;;
  
  export default function User() {
    const navigate = useNavigate();
    const { id } = useParams();
    const { isLogin } = useRecoilValue(userState);
  
    if (!isLogin) {
      return &lt;div&gt;Login 후 이용 가능합니다.&lt;/div&gt;;
    }
  
    return (
      &lt;div&gt;
        {id}
        &lt;button
          type=&quot;button&quot;
          onClick={() =&gt; {
            navigate(&quot;/&quot;);
          }}
        &gt;
          Go to Home
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// src/pages/user/User.test.tsx
  
  import { MemoryRouter } from &quot;react-router-dom&quot;;
  import { render, screen, renderHook, act } from &quot;@testing-library/react&quot;;
  import { RecoilRoot, useSetRecoilState } from &quot;recoil&quot;;
  import User from &quot;./User&quot;;
  import type { UserType } from &quot;../../state/user&quot;;
  import userState from &quot;../../state/user&quot;;
  
  const userStateMock = (user: UserType) =&gt; {
    const { result } = renderHook(() =&gt; useSetRecoilState(userState), {
      wrapper: RecoilRoot,
    });
  
    act(() =&gt; {
      result.current(user);
    });
  
    return result;
  };
  
  describe(&quot;&lt;User /&gt;&quot;, () =&gt; {
    const renderUserComponent = () =&gt;
      render(
        &lt;RecoilRoot&gt;
          &lt;MemoryRouter&gt;
            &lt;User /&gt;
          &lt;/MemoryRouter&gt;
        &lt;/RecoilRoot&gt;
      );
  
    describe(&quot;When user hasn't logged in&quot;, () =&gt; {
      it(&quot;Should render warning message&quot;, () =&gt; {
        userStateMock({
          isLogin: false,
        });
  
        renderUserComponent();
  
        expect(screen.getByText(/Login 후 이용 가능합니다./)).toBeDefined();
      });
    });
  });
  
  </code></pre>
  <p><strong>Result of the test</strong>
  <a href="https://i.stack.imgur.com/WqcM4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WqcM4.png" alt="Result of the test" /></a></p>