テスト時にreact-modalが原因で発生するエラー解消方法

現在react-modalを使うことはあまりないですが、備忘録も兼ねて。

対象となるモーダルのコード

import React from "react";
import Modal from "react-modal";

export const exampleModal = () => {
  Modal.setAppElement("#root"); // ルートとなる要素を指定
  
  const [isOpen, setIsOpen] = React.useState(false);
  
  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <Modal
        isOpen={isOpen}
        onRequestClose={() => {
          setIsOpen(false);
        }}
      >
      <h2>Example Modal</h2>
      <button onClick={() => setIsOpen(false)}>Close Modal</button>
    </Modal>
    </>
  );
};

testing-libraryを使用して、react-modalを使用したモーダルのテストをする際に、以下のようなエラーが発生するはずです。

Error: react-modal: No elements were found for selector #root.

解消方法

テストコードに以下のコードを追加することで解消できます。

  beforeAll(() => {
    const app = document.createElement("div")
    app.id = "root" // 指定しているルートとなる要素を作成
  
    document.body.appendChild(app)
  });