title: Mocking authentication when testing MSAL React Apps
body: <p>Our app is wrapped in the MSAL Authentication Template from <code>@azure/msal-react</code> in a standard way - key code segments are summarized below.</p>
  <p>We would like to test app's individual components using react testing library (or something similar). Of course, when a React component such as <code>SampleComponentUnderTest</code> is to be properly rendered by a test as is shown in the simple test below, it must be wrapped in an MSAL component as well.</p>
  <p>Is there a proper way to mock the MSAL authentication process for such purposes? Anyway to wrap a component under test in MSAL and directly provide test user's credentials to this component under test? Any references to useful documentation, blog posts, video, etc. to point us in the right direction would be greatly appreciated.</p>
  <p><strong>A Simple test</strong></p>
  <pre><code>test('first test', () =&gt; {
    const { getByText } = render(&lt;SampleComponentUnderTest /&gt;);
    const someText = getByText('A line of text');
    expect(someText).toBeInTheDocument();
  });
  </code></pre>
  <p><strong>Config</strong></p>
  <pre><code>export const msalConfig: Configuration = {
    auth: {
      clientId: `${process.env.REACT_APP_CLIENT_ID}`,
      authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANT_ID}`,
      redirectUri:
        process.env.NODE_ENV === 'development'
          ? 'http://localhost:3000/'
          : process.env.REACT_APP_DEPLOY_URL,
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: false,
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) =&gt; {
          if (containsPii) {
            return;
          }
          switch (level) {
            case LogLevel.Error:
              console.error(message);
              return;
            case LogLevel.Info:
              console.info(message);
              return;
            case LogLevel.Verbose:
              console.debug(message);
              return;
            case LogLevel.Warning:
              console.warn(message);
              return;
            default:
              console.error(message);
          }
        },
      },
    },
  };
  </code></pre>
  <p><strong>Main app component</strong></p>
  <pre><code>const msalInstance = new PublicClientApplication(msalConfig);
  
  &lt;MsalProvider instance={msalInstance}&gt;
    {!isAuthenticated &amp;&amp; &lt;UnauthenticatedHomePage /&gt;}
    {isAuthenticated &amp;&amp; &lt;Protected /&gt;}
  &lt;/MsalProvider&gt;
  </code></pre>
  <p><strong>Unauthenticated component</strong></p>
  <pre><code>const signInClickHandler = (instance: IPublicClientApplication) =&gt; {
    instance.loginRedirect(loginRequest).catch((e) =&gt; {
      console.log(e);
    });
  };
  
  &lt;UnauthenticatedTemplate&gt;
    &lt;Button onClick={() =&gt; signInClickHandler(instance)}&gt;Sign in&lt;/Button&gt;
  &lt;/UnauthenticatedTemplate&gt;
  </code></pre>
  <p><strong>Protected component</strong></p>
  <pre><code>&lt;MsalAuthenticationTemplate
    interactionType={InteractionType.Redirect}
    errorComponent={ErrorComponent}
    loadingComponent={LoadingComponent}
  &gt;
      &lt;SampleComponentUnderTest /&gt;
  &lt;/MsalAuthenticationTemplate&gt;
  </code></pre>