HTMLで作ったサイトをReactにしたらJestでWarningでた

仕事と、特に子育てが少しだけ落ち着いてきたので、アウトプット再開して継続させたい...!!

ということで、慌てて作ったHTMLのサイトを慌ててReactで作り直していたら、思わぬところで警告がでたのでメモ。

tableがJestで警告でた

<table className="tbl">
  <tr className="tbl-tr">
    <td className="tbl-tr__tdTitle">サイト名：</td>
    <td>{siteName}</td>
  </tr>
</table>

この状態でjestを実行させるとWarningがでた。

Warning: validateDOMNesting(...): 
<tr> cannot appear as a child of <table>. 
Add a <tbody>, <thead> or <tfoot> to your code 
to match the DOM tree generated by the browser.

解消方法はメッセージの通りで、
tableの中にtbodyを追加したらWarningが消えた。

<table className="tbl">
  <tbody>
    <tr className="tbl-tr">
      <td className="tbl-tr__tdTitle">サイト名：</td>
      <td>{siteName}</td>
    </tr>
  </tody>
</table>

原因を調べてみた

どうやら、Reactをレンダリングするときに、tbodyがないとブラウザ側で勝手に追加するらしく、その結果、コードと差分が発生して警告がでるらしい。
（その原因まで調べると難しそうなので、深くは追求しない）