react-markdown使用時にJestでテスト実行すると"Must use import to load ES Module"のエラーが出る

はじめに

react-markdownを使用したコンポーネントに対して、Jestでテストを実行すると"Must use import to load ES Module"のエラーが出ました。

react-markdownはESMで提供されていますが（v7以降）、CommonJS の形式で読み込まれてテスト実行されてしまっていると思われます。

解決方法

テスト時にreact-markdownをモック化しました。

Test.tsx

jest.mock("react-markdown", () => (props) => {
  return <>{props.children}</>;
});

おわりに

Jestの設定をいじることでESMを扱う方法もあります。
（私はうまくいきませんでした。）

参考