TypeError: cryptoObj.getRandomValues is not a function; unrelated error when using jest & testing-library/react

Core Library

MSAL.js v2 (@azure/msal-browser)

Core Library Version

2.15.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

1.0.1

Description

I have a project where I've used msal-react & msal-browser in some part of my application. When I try to test some other components (which doesn't depend on msal-browser) using react-testing-library and run npm test I get TypeError: cryptoObj.getRandomValues is not a function error. Before I was getting _cryptononexistent error like mentioned in this issue and managed to fix this error by adding crypto to jest globals using craco.

Here's my jest config.

Error Message

FAIL src/home/tests/offices-explore.test.tsx ● Test suite failed to run

TypeError: cryptoObj.getRandomValues is not a function

  12 |
  13 | import React, { useState, useEffect } from 'react';
> 14 | import { models, Embed, service } from 'powerbi-client';
     | ^
  15 | import { PowerBIEmbed } from 'powerbi-client-react';
  16 | import { appServices } from 'common/services';
  17 | import { useAccount, useMsal } from '@azure/msal-react';

  at Function.WindowPostMessageProxy.createRandomString (node_modules/powerbi-client/dist/webpack:/powerbi-client/node_modules/window-post-message-proxy/dist/windowPostMessageProxy.js:125:1)
  at new WindowPostMessageProxy (node_modules/powerbi-client/dist/webpack:/powerbi-client/node_modules/window-post-message-proxy/dist/windowPostMessageProxy.js:77:1)
  at wpmpFactory (node_modules/powerbi-client/dist/webpack:/powerbi-client/src/factories.ts:27:10)
  at new Service (node_modules/powerbi-client/dist/webpack:/powerbi-client/src/service.ts:160:17)
  at Object../src/powerbi-client.ts (node_modules/powerbi-client/dist/webpack:/powerbi-client/src/powerbi-client.ts:64:15)
  at __webpack_require__ (node_modules/powerbi-client/dist/webpack:/powerbi-client/webpack/bootstrap:19:1)
  at node_modules/powerbi-client/dist/webpack:/powerbi-client/webpack/bootstrap:83:1
  at node_modules/powerbi-client/dist/powerbi.js:100:10
  at webpackUniversalModuleDefinition (node_modules/powerbi-client/dist/webpack:/powerbi-client/webpack/universalModuleDefinition:3:1)
  at Object.<anonymous> (node_modules/powerbi-client/dist/webpack:/powerbi-client/webpack/universalModuleDefinition:10:2)
  at Object.<anonymous> (src/analytics/PowerBi/powerbi.tsx:14:1)
  at Object.<anonymous> (src/analytics/PowerBi/index.tsx:5:1)
  at Object.<anonymous> (src/main/App/App.tsx:18:1)
  at Object.<anonymous> (src/home/OfficesExplore/offices-explore.tsx:12:1)
  at Object.<anonymous> (src/home/OfficesExplore/index.tsx:1:1)
  at Object.<anonymous> (src/home/__tests__/offices-explore.test.tsx:3:1)

Msal Logs

No response

MSAL Configuration

import { PublicClientApplication, Configuration } from '@azure/msal-browser';

const config: Configuration = {
  auth: {
    authority: `https://login.microsoftonline.com/${MsalConfig.Corporate_AAD}`,
    clientId: MsalConfig.ClientId,
    navigateToLoginRequestUrl: true,
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: true,
  },
};

export const authenticationParameters = {
  scopes: [
    'https://analysis.windows.net/powerbi/api/App.Read.All',
    'https://analysis.windows.net/powerbi/api/Dataset.Read.All',
    'https://analysis.windows.net/powerbi/api/Dashboard.Read.All',
    'https://analysis.windows.net/powerbi/api/Report.Read.All',
  ],
};

export const msalObj = new PublicClientApplication(config);

Relevant Code Snippets

import React from 'react';
import { render } from '@testing-library/react';
import OfficesExplore from 'home/OfficesExplore';

describe('OfficesExplore', () => {
  test('renders without crashing', () => {
    render(
      <OfficesExplore employeeId={ '1' } />
    );
  });
});

Reproduction Steps

write test for the component that doesn't rely one msal-browser/react packages.
run npm test

Expected Behavior

Npm test command should work without any problems because the component that I am testing doesn't rely on any msal related packages. Moreover I've added crypto to globals as suggested in code samples.

Identity Provider

Azure AD / MSA

Browsers Affected (Select all that apply)

Other

Regression

No response

Source

External (Customer)

AzureAD / microsoft-authentication-library-for-js