title: How to mock react-adal with a create-react-app using jest
body: <p>I have this app I built using create-react-app v2, I'm using jest as it comes out of the box, and as a testing utility I am complementing it with <code>react-testing-library </code>.
  The app is being Authorized by ADAL and we used the <code>react-adal</code> library to help us interface with React. After I added adal all my unit tests started breaking clearly because now there is authorization layer.
  My issue is that I haven't been able to mock the auth part and get through the auth part using my unit tests, if that makes sense. I was wondering if anyone had any experience in this realm and lend a helping hand :)</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import { Provider } from 'react-redux';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import store from './store';
  import { GlobalStyle } from './utils/styles/global';
  import { SimpleDialog } from './components';
  import {
      Home,
  } from './Pages/index';
  import { icons } from './utils/Icons';
  import { withAdalLoginApi } from './components/Auth/AdalAuthProvider/Adal.config';
  /**
   * icons() contains all the added icons to the project
   */
  icons();
  
  /**
   * Has root component of the react app
   * every view and component are handled
   * by this top most component of the
   * react heirarchy
   */
  const App = () =&gt; (
      &lt;Provider store={store}&gt;
          &lt;Fragment&gt;
              &lt;GlobalStyle /&gt;
              &lt;SimpleDialog aria-modal aria-label="simple-dialog" /&gt;
              &lt;Router&gt;
                  &lt;Switch&gt;
                    &lt;Route exact path='/' component={Home}
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          &lt;/Fragment&gt;
      &lt;/Provider&gt;
  );
  
  export default withAdalLoginApi(App);
  </code></pre>
  
  <p><strong>index.js:</strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { runWithAdal } from 'react-adal';
  import App from './App';
  import { authContext } from './components/Auth/AdalAuthProvider/Adal.config';
  import * as serviceWorker from './serviceWorker';
  
  const DO_NOT_LOGIN = false;
  
  runWithAdal(
      authContext,
      () =&gt; {
          ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
      },
      DO_NOT_LOGIN,
  );
  
  serviceWorker.unregister();
  </code></pre>
  
  <p><strong>adal.config.js:</strong></p>
  
  <pre><code>**import {
      AuthenticationContext,
      adalFetch,
      withAdalLogin,
      runWithAdal,
      adalGetToken,
  } from 'react-adal';
  
  export const adalConfig = {
      tenant: process.env.REACT_APP_TENANT,
      clientId: process.env.REACT_APP_MSAL_CLIENT_ID,
      endpoints: { api: process.env.REACT_APP_GRAPH_ENDPOINT },
      cacheLocation: process.env.REACT_APP_CACHE_LOCATION,
  };
  
  const DO_NOT_LOGIN = false;
  export const authContext = new AuthenticationContext(adalConfig, false);
  
  /**
   * Takes React.DOM App render and wraps it,
   * to avoid duplicate ReactApps started on iframes
   *
   * @param {*} path
   */
  export const withAdal = dom =&gt; runWithAdal(authContext, () =&gt; dom, DO_NOT_LOGIN);
  
  /**
   * Logs user out
   */
  export const logOut = () =&gt; authContext.logOut();
  
  /**
   * acquire token
   */
  export const acquireToken = () =&gt; authContext.acquireToken();
  
  /**
   * something
   */
  export const getAdalToken = () =&gt; adalGetToken(authContext, adalConfig.endpoints.api);
  
  /**
   * adalFetch
   *
   * @param {*} fetch
   * @param {*} url
   * @param {*} options
   */
  export const adalApiFetch = (fetch, url, options) =&gt; adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);
  
  export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);
  **
  </code></pre>
  
  <p><strong>App.test.js:</strong></p>
  
  <pre><code>import React from 'react';
  // import ReactDOM from 'react-dom';
  import { render } from 'react-testing-library';
  import * as adal from 'react-adal';
  import App from '../App';
  import {
      withAdalLoginApi,
      getAdalToken,
      authContext,
      adalConfig,
  } from '../components/Auth/AdalAuthProvider/Adal.config';
  
  adal.adalGetToken = jest.fn();
  
  fit('Logs in', async () =&gt; {
      render(&lt;App /&gt;);
  });
  </code></pre>
  
  <p>I've tried several things, however, I keep receiveing the same message:
  <code>{ message: 'User login is required', msg: 'login required' }</code></p>