title: Wirite test using JestJs with React Context Provider and Hooks
body: <p>I am newbie to front-end development and working on authentication with Okta-React. I have multiple components where i would like to pass logged in user information so i using react context with hook. This works fine but i would like to have some simple test written but currently it just goes on endless loop.</p>
  <pre><code>  console.error node_modules/react-dom/cjs/react-dom.development.js:88
      Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
          in AuthProvider (created by WrapperComponent)
          in WrapperComponent
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { useAuthContext } from '../AuthContext/AuthContext';
  import AuthProvider from '../AuthProvider/AuthProvider';
  import { mount, configure } from 'enzyme';
  import adapter from 'enzyme-adapter-react-16';
  
  configure({ adapter: new adapter() });
  
  jest.mock(&quot;@okta/okta-react&quot;, () =&gt; ({
      useOktaAuth: () =&gt; {
        return {
          authState: {},
          authService: {},
        };
      },
      withOktaAuth: (x: any) =&gt; x,
  }));
  
  describe('AuthContext', () =&gt; {
      it('user not logged - isAuth returns false', () =&gt; {
  
          const TestComponent = () =&gt; {
              const { isAuthenticated } = useAuthContext();
  
              return (
                  &lt;&gt;
                      &lt;div data-testId=&quot;value&quot;&gt;{isAuthenticated?.toString()}&lt;/div&gt;
                  &lt;/&gt;
              )
          }
  
          const wrapper = mount(
              &lt;AuthProvider&gt;
                  &lt;TestComponent /&gt;
              &lt;/AuthProvider&gt;
          );
  
          expect(wrapper.find('[data-testId=&quot;value&quot;]').text()).toEqual(&quot;false&quot;);
      });
  });
  
  </code></pre>
  <p>AuthContext.tsx</p>
  <pre class="lang-js prettyprint-override"><code>import { createContext, useContext } from 'react';
  import { IAuthContext } from '../../types/IAuthContext';
  
  export const useAuthContext = () =&gt; useContext(AuthContext);
  
  const AuthContext = createContext&lt;IAuthContext&gt;({
      user: null,
      isAuthenticated: null,
      accessToken: ''
  });
  
  export default AuthContext;
  </code></pre>
  <p>AuthProvider.tsx</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import { useOktaAuth } from '@okta/okta-react';
  import AuthContext from '../../components/AuthContext/AuthContext';
  import { IAuthContext } from '../../types/IAuthContext';
  import { IUserInfo } from '../../types/IUserInfo';
  
  const AuthProvider = (props: any) =&gt; {
      const { authState, authService } = useOktaAuth();
      const [authContext, setAuthContext] = useState&lt;IAuthContext&gt;(
          {} as IAuthContext
      );
  
      useEffect(() =&gt; {
          if (!authState.isAuthenticated) {
              setAuthContext({} as IAuthContext);
          } else {
              authService.getUser().then((info: IUserInfo) =&gt; {
                  setAuthContext({
                      accessToken: authState.accessToken,
                      isAuthenticated: authState.isAuthenticated,
                      user: info
                  });
              });
          }
      }, [authState, authService]);
  
      return (
          &lt;AuthContext.Provider value={authContext}&gt;
              {props.children}
          &lt;/AuthContext.Provider&gt;
      );
  };
  
  export default AuthProvider;
  
  </code></pre>