【React × react-testing-library × Jest】error: uncaught [typeerror: cannot read properties of undefined (reading 'sanitize')]の解決方法

はじめに

React Testing LibraryとJestを用いたテスト実装中に、DOMPurifyに関連するエラーが発生したので、解決方法をまとめました。エラーの原因と解決方法を解説します。

問題

以下のようなエラーが発生しました。

error: uncaught [typeerror: cannot read properties of undefined (reading 'sanitize')]

エラーの原因は、DOMPurifyの設定やモジュールのインポート方法に問題があったようです。コンポーネントのコードは以下の通りです。

import { useEffect, useState } from "react";
import { getAllUsersData } from "../utils/supabaseFunction";
import { User } from "../domain/User";

import { Box, Button, Link, Text } from "@chakra-ui/react";
import { useParams } from "react-router-dom";
import { ExternalLinkIcon } from "@chakra-ui/icons";
import * as DOMPurify from "isomorphic-dompurify";

import parse from "html-react-parser";

const Card = () => {
  const { id } = useParams();
  const [userData, setuserData] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  const ParserSanitized = ({ html }: { html: string }) => {
    const sanitizedHtml = DOMPurify.sanitize(html);
    return parse(sanitizedHtml);
  };
  return (
  //省力
  );
};

export default Card;

原因と解決方法

DOMPurifyを使用する際に、sanitizeが定義されていないというエラーが発生しました。このエラーの原因と解決方法は以下の通りです。

以下のように、DOMPurifyのインポートを変更します。

import * as DOMPurify from "isomorphic-dompurify";

この修正でエラーが解消されましたが、次に以下のエラーが発生しました。

Cannot find module 'isomorphic-dompurify' or its corresponding type declarations.

このエラーは、isomorphic-dompurifyがインストールされていないために発生します。以下のコマンドでモジュールをインストールすることで解消しました。

 npm i isomorphic-dompurify 

終わりに

今回はDOMPurifyに関するエラーの解消でした。今後もテストやエラーを通じてさらに学びを深めていきたいと思います。

参考

『【React Jest】DOMPurifyを自動テスト中に使った際のimportエラー』
https://qiita.com/yuuki4135/items/17eef9ca5992cf9fac53