React Router を使ったアプリのテストでエラー【'React.useContext(...)' as it is null】が出た

エラー内容

React Router を使ったコンポーネントをテストしようとしたとき、次のようなエラーが出ました。

TypeError: Cannot destructure property 'basename' of 'React.useContext(...)' as it is null

これはどういうことかというと、React.useContext(...) の中で読んでる RouterContext が null になっています。

React Routerのコンポーネントは親に Router がいないと動けない構造なので、
Context が提供されない＝null → 分解しようとしてエラーになります。

エラーの原因

Link, Route などは内部で React Router の Context（RouterContext）を使っていますが、テスト時に BrowserRouter や MemoryRouter でラップしていないと useContext が null を返します。そのため Node.js には TextEncoder がなく、必要なら polyfill する必要があります。

解決策まとめ

1. Router でラップする

import { MemoryRouter } from 'react-router-dom';

render(
  <MemoryRouter>
    <Sidebar ... />
  </MemoryRouter>
);

2. TextEncoder を polyfill

Node.js には最初から global.TextEncoder がないので、
util.TextEncoderを使って、グローバルに追加する必要があります。

//Node.js が標準で持っている util モジュールから TextEncoder を取り出し
import { TextEncoder } from 'util';
//ブラウザ環境で本来使えるはずの global.TextEncoder にセット
global.TextEncoder = TextEncoder;

参考