LoginSignup
0
0

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

Posted at

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');

のいずれかになります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0