おきたこと

こう書いた。

const App = () => (
   <div>
      {createPortal(<Message />, document.getElementById('modal-root'))}
      content here
    </div>
)

事故った

Summary of all failing tests
 FAIL  src/App.test.js (5.15s)
  ● renders without crashing

    Invariant Violation: Target container is not a DOM element.
      
      at invariant (node_modules/fbjs/lib/invariant.js:42:15)
      at createPortal (node_modules/react-dom/cjs/react-dom.development.js:17287:34)
      at App (src/App.js:35:36)
      at Object.type (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:329:38)
      at ReactShallowRenderer.render (node_modules/react-test-renderer/cjs/react-test-renderer-shallow.development.js:145:34)
      at node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:333:37
      at withSetStateAllowed (node_modules/enzyme-adapter-utils/build/Utils.js:110:16)
      at Object.render (node_modules/enzyme-adapter-react-16/build/ReactSixteenAdapter.js:332:70)
      at new ShallowWrapper (node_modules/enzyme/build/ShallowWrapper.js:170:22)
      at shallow (node_modules/enzyme/build/shallow.js:21:10)
      at Object.<anonymous>.it (src/App.test.js:7:23)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)
      at process._tickCallback (internal/process/next_tick.js:68:7)

対応

こう変えた。

const Potal = () => {
  const target = document.getElementById('modal-root');
  if (!target) return null;
  return createPortal(<Message />, target);
}

const App = () => (
   <div>
      <Potal />
      content here
    </div>
)

自分の理解

エラーメッセージが[Target container is not a DOM element]だったので、「createPortalで指定してるターゲット要素がDOMにない」と言われていると判断。

「じゃあない時は何もしないようにすればよくね？」ということで、getElementByIdの戻り値がない時はnullを返すコンポーネントをいれてみた。