msal-browser throws error when running unit tests in Jest

[nick-romano0]

Please follow the issue template below. Failure to do so will result in a delay in answering your question.

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.0.0-beta.3
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angularjs@1.x.x

Important: Please fill in your exact version number above, e.g. msal@1.1.3.

Framework

React 16.13.0
create-react-app
jest

Description

new msal-browser package throws error when running unit tests in jes.

Error Message

 Test suite failed to run

    BrowserAuthError: crypto_nonexistent: The crypto object or function is not available. Detail:Browser crypto or msCrypto object not available.

      42 | };
      43 | 
    > 44 | export const msalApp = new PublicClientApplication({
         |                        ^
      45 |     auth: {
      46 |         clientId: "58a18e2e-f3cb-4c6d-b07f-77703e6a215b",
      47 |         authority: "https://login.microsoftonline.com/b36c7ed3-4a9c-4ba9-bdf9-9db03fcbd392",

      at BrowserAuthError.AuthError [as constructor] (node_modules/@azure/msal-common/dist/index.es.js:109:24)

Security

• Is this issue security related?

Regression

• Did this behavior work before?
  Version:
  Yes, msal@^1.3.0

MSAL Configuration

// Provide configuration values here.
// For Azure B2C issues, please include your policies.
{
    auth: {
        clientId: "<>",
        authority: "<>",
        validateAuthority: true,
        redirectUri: window.location.origin
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false
    },
    system: {
        navigateFrameWait: 0
    }
}

Reproduction steps

export const msalApp = new PublicClientApplication({
    auth: {
        clientId: "<>",
        authority: "<>",
        validateAuthority: true,
        redirectUri: window.location.origin
    },
    cache: {
        cacheLocation: "localStorage",
        storeAuthStateInCookie: false
    },
    system: {
        navigateFrameWait: 0
    }
});
...

Expected behavior

Browsers/Environment

• Chrome
• Firefox
• Edge
• Safari
• IE
• Other (Node / jest)

[jmckennon]

If you're upgrading from 1.3.0, we never used any of the crypto objects/APIs in that version and previous. It's possible that you need to mock the instantiation of the crypto objects in your tests now after not having to do so before. This can be seen in PublicClientApplication.

If this does not work or if it's a separate problem entirely, please let us know and we can advise further (or potentially push some fixes).

[pkanher617]

@nick-romano-kci Specifically, you will need to mock the window.crypto object. See here. You can also try mocking the BrowserCrypto APIs themselves.

[jmckennon]

Closing this as we're assuming the problem is solved due to inactivity. Please open a new issue if you have further questions. Thanks!

[ArtemSkliar]

To solve this problem the following jest config settings helped me

module.exports = {
  globals: {
    crypto: require('crypto')
  }
};