create-react-app＆MSALのjestでコケる

現象

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

状況

create-react-appでReactアプリを作成し、テスト対象のcomponentにてMicroSoft Authentication Library(MSAL)を使用している。

Component.tsx

import { useMsal } from '@azure/msal-react'

export default function ComponentName() {
  const { instance, accounts, inProgress } = useMsal()
  ...
}

このcomponentに対して、下記のようなテストを作成したところ、上述のエラーが発生した。

Component.test.tsx

const useMsalMock = useMsal as jest.MockedFunction<typeof useMsal>

test('renders Component', () => {
  useMsalMock.mockReturnValue({instance: {instance}, accounts: {accounts}, inProgress: {inProgress}})
  
  const { asFragment } = render(<Component>)
  expect(asFragment()).tmMatchSnapshot()
})

解決策

1. package.jsonを修正

package.json

  "scripts": {
    // "test": "react-scripts test"
    "test": "jest --watch",
  }

2. jest設定をpackage.json -> jest.config.jsに移行。
3. jest.config.jsに下記globals設定を追記

jest.config.js

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

4. happy!

解説

エラー自体はissueにあるように、jest.config.jsにglobalsの設定を追記すればOK.
create-react-appではpackage.jsonに設定を書き込むが、globalsは対応していない。
そこで、jest.config.jsonを読み込むようにした上で、そこにglobals設定を書き込むことで解決。

補足

"react-scripts test -- --config=jest.config.js" としても良いが、warningが出てしまった。時間がなかったので今回はjestコマンドにしてしまうことで回避。