I'm trying to test a few ponents that are using MSAL for authentication.

Thus far, I have a simple test, which test if my ponent can render, as follows:

let container;
beforeEach(() => {
    container = render(<NavBar/>)
});
test('Component renders', () => {
    expect(container).not.toBeNull()
})

When I run the test, I'm getting the following error:

BrowserAuthError: crypto_nonexistent: The crypto object or function is not available. Detail:Browser crypto or msCrypto object not available.
  
  at BrowserAuthError.AuthError [as constructor] (node_modules/@azure/msal-browser/dist/index.cjs.js:545:24)
  at new BrowserAuthError (node_modules/@azure/msal-browser/dist/index.cjs.js:7096:28)
  at Function.Object.<anonymous>.BrowserAuthError.createCryptoNotAvailableError (node_modules/@azure/msal-browser/dist/index.cjs.js:7113:16)
  at new BrowserCrypto (node_modules/@azure/msal-browser/dist/index.cjs.js:7413:36)
  at new CryptoOps (node_modules/@azure/msal-browser/dist/index.cjs.js:7782:30)
  at PublicClientApplication.ClientApplication (node_modules/@azure/msal-browser/dist/index.cjs.js:10027:58)
  at new PublicClientApplication (node_modules/@azure/msal-browser/dist/index.cjs.js:11307:23)

I'm unsure what the above means, but as far as I can understand, this error is occurring because the session is not authenticated.

My question can therefore be divided into the following:

• What does this error mean?
• How can I solve this error? (Can we bypass MSAL by any chance for testing purposes?)

I'm trying to test a few ponents that are using MSAL for authentication.

Thus far, I have a simple test, which test if my ponent can render, as follows:

let container;
beforeEach(() => {
    container = render(<NavBar/>)
});
test('Component renders', () => {
    expect(container).not.toBeNull()
})

When I run the test, I'm getting the following error:

BrowserAuthError: crypto_nonexistent: The crypto object or function is not available. Detail:Browser crypto or msCrypto object not available.
  
  at BrowserAuthError.AuthError [as constructor] (node_modules/@azure/msal-browser/dist/index.cjs.js:545:24)
  at new BrowserAuthError (node_modules/@azure/msal-browser/dist/index.cjs.js:7096:28)
  at Function.Object.<anonymous>.BrowserAuthError.createCryptoNotAvailableError (node_modules/@azure/msal-browser/dist/index.cjs.js:7113:16)
  at new BrowserCrypto (node_modules/@azure/msal-browser/dist/index.cjs.js:7413:36)
  at new CryptoOps (node_modules/@azure/msal-browser/dist/index.cjs.js:7782:30)
  at PublicClientApplication.ClientApplication (node_modules/@azure/msal-browser/dist/index.cjs.js:10027:58)
  at new PublicClientApplication (node_modules/@azure/msal-browser/dist/index.cjs.js:11307:23)

I'm unsure what the above means, but as far as I can understand, this error is occurring because the session is not authenticated.

My question can therefore be divided into the following:

• What does this error mean?
• How can I solve this error? (Can we bypass MSAL by any chance for testing purposes?)

• javascript
• reactjs
• azure-ad-msal

Share Improve this question Follow asked Jul 16, 2021 at 11:19 Jeppe ChristensenJeppe Christensen 1,89033 gold badges2929 silver badges6363 bronze badges 3

• did you manage to solve this issue? – Vivere Commented Sep 10, 2021 at 7:08
• 1 Actually I did. I will post a reply later. (Completely forgot about this) – Jeppe Christensen Commented Sep 10, 2021 at 13:38
• Looking forward to the solution. Banged my head for a couple of hours on this. – Vivere Commented Sep 10, 2021 at 19:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

So basically, I've found that my <NavBar/> ponent were dependent on two MS Graph API calls namely getAccountData() and setAccountData(), which obviously needed a token to function, and caused the nasty error above.

Therefore, I decided to bypass the two functions by simply mocking them, like so:

jest.mock('../msGraph', () => ({ setAccountData: jest.fn() }))
jest.mock('../msGraph', () => ({ getAccountData: jest.fn() }))

I was not dependent on getting data from Graph in order to carry out my test - So the two mock functions does not return any data. (I could however have done so by adding it inside the brackets of jest.fn())