反应笑话和 MSAL 得到 BrowserAuthError答案

【问题标题】：React jest and MSAL getting BrowserAuthError反应笑话和 MSAL 得到 BrowserAuthError
【发布时间】：2021-07-16 11:19:16
【问题描述】：

我正在尝试测试一些使用 MSAL 进行身份验证的组件。

到目前为止，我有一个简单的测试，测试我的组件是否可以渲染，如下：

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

当我运行测试时，我收到以下错误：

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)

我不确定以上是什么意思，但据我所知，发生此错误是因为会话未经过身份验证。

因此我的问题可以分为以下几类：

这个错误是什么意思？
如何解决此错误？（我们可以绕过 MSAL 进行测试吗？）

【问题讨论】：

你解决了这个问题吗？
其实我做到了。我稍后会发布回复。（完全忘记了）
期待解决方案。为此，我头疼了几个小时。

标签： javascript reactjs msal

【解决方案1】：

所以基本上，我发现我的 <NavBar/> 组件依赖于两个 MS Graph API 调用，即 getAccountData() 和 setAccountData()，这显然需要一个令牌才能运行，并导致上述令人讨厌的错误。

因此，我决定通过简单地模拟它们来绕过这两个函数，如下所示：

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

我不依赖从 Graph 获取数据来执行我的测试 - 所以这两个模拟函数不返回任何数据。（不过，我可以通过将其添加到 jest.fn() 的括号内来做到这一点）

【讨论】：