jest-dom で \u00a0 ( ) をチェックする方法

testing-library で単体テストを作成している場合の話です。

単体テストで、\u00a0 ( ) が表示されていることを確認したい場合があります。例えば選択肢のラベル。空の選択肢を表示したいのだけど、空文字だと高さが確保されないので、\u00a0 を使用するという場合があります。

テキストのチェックには、testing-library/jest-dom の toHaveTextContent() がよく使われますが、\u00a0 についてはハマります。

expect(node).toHaveTextContent('\u00a0');

と記載しても、チェックされません。toHaveTextContent() は、デフォルトで、テキストに対して text.replace(/\s+/g, ' ').trim() の処理を行います。その上でチェックを行います。

toHaveTextContent() には normalizeWhitespace というオプションがあって、これを false にすることで text.replace(/\s+/g, ' ').trim() の処理を抑制できます。

expect(node).toHaveTextContent('\u00a0', {normalizeWhitespace: false});

残念ながら、これでも \u00a0 はチェックできません。抑制しても text.replace(/\u00a0/g, ' ') の処理が働いてしまうからです。つまりどうやっても \u00a0 は変換されてしまいます。

この処理を理解した上でスペースのチェックで諦めるか

expect(node).toHaveTextContent(' ', {normalizeWhitespace: false});

toHaveTextContent() を使わない

expect(node.textContent).toEqual('\u00a0');

のいずれかになります。