jestのテストで三項演算子により表示される文言をテストしたい。

前提

とあるページにて三項演算子により表示される文言が違うのですが、jestでそのチェックを行いたいです。

実現したいこと

jestでどちらかの文言が表示されていることを担保したい。

該当のソースコード

sample.tsx

export const Sample = () => {
const sample = {
  text:"サンプルテキスト01"
}

return (
  <div>
    {sample.text ? 
           <div>
             {sample.text}
           </div>
        :  <div>
              "サンプルテキスト02"
           </div>
     }
  </div>
  );
};

sample.test.tsx

import { Sample } from 'src/sample';

describe('Sample', () => {
  test('画面が表示されることを確認', () => {
    const { getByText } = render(<Sample />);
  });
});

試したこと

マッチャー等を調べてみたが、今回のパターンのような使い方が見つからなかった。

行動規範の内容に同意します

回答1件

ベストアンサー

マッチャー等を調べてみたが、今回のパターンのような使い方が見つからなかった。

toMatchで正規表現にマッチさせる、あるいは条件式までは自分で書いてそれを「trueかどうか」だけjestに検証させる、というような手段も考えられます。

投稿2023/01/30 05:23

maisumakun

総合スコア145183

uniuonbiz

2023/01/30 05:37

有難うございますmm jestの知識が乏しく申し訳ないのですが、今回の場合だとexpectへの引数はどこになるのでしょうか？また、三項演算子でsample.textに値があるかどうかを確かめているのですが、無かった場合はパス出来るのでしょうか？

maisumakun

2023/01/30 05:54 編集

> また、三項演算子でsample.textに値があるかどうかを確かめているのですが、無かった場合はパス出来るのでしょうか？こちらはjestとは別件の話ではないでしょうか？（表示されるコードを検証したい、というだけなら、中身で三項演算子を使っていようがいまいが、何も関係ないと思うのですが、違うのですか？）

uniuonbiz

2023/01/30 06:03

すみません。 >表示されるコードを検証したいこちらの認識で大丈夫です。ただ僕の知識ではtoMatchでどう書けば「表示されるコードを検証」出来るのか分からず...。よろしければ具体的なコード等を提示していただくことは可能でしょうか？

maisumakun

2023/01/30 06:06

expect(表示された文字列).toMatch(/文字列1|文字列2/) …この程度で大丈夫ですか？

uniuonbiz

2023/01/30 06:14

有難うございます。今回ですと下記のようなコードになるでしょうか？ expect('サンプルテキスト01' || 'サンプルテキスト02').toMatch(/サンプルテキスト01|サンプルテキスト02/)

maisumakun

2023/01/30 06:16

そのコードは、何をテストしたいのでしょうか？画面から取得した値を使わずリテラルで書くのでは、JavaScript環境のテストにしかならないです。