反応コンポーネントがJestで存在しない場合のテスト

時には、特定の要素がレンダリングされないかどうかをチェックするテストを書きたい場合があります.
たとえば、ユーザーが特定のレベルまたはアクションを持つまでセクションを無効にするパラメーターがあります.
これをテストする方法はいくつかあります.

要素を問い合わせる

非存在のためにテストするときに注意する最も重要なことは、クエリ項目を必要とすることです.
要素を探すときは、getBy or getAllBy それから何か.
この関数は、要素が存在することを知っている場合にはうまくいきますが、JESTはこれらが見つからなかった場合にエラーをスローします.
レンダリングされていない要素を安全にするには、クエリの代替を使用する必要があります.queryBy and queryAllBy .
以下のコンポーネントをスケッチしましょう.

function App({ firstTime = false }) {
  return (
    <div className='App'>
      <strong>Welcome to our app</strong>
      {firstTime && <p>I see this is your first time!</p>}
    </div>
  );
}

ご覧の通り、これは2行になりますが、firstTime 変数をtrueに2番目の文を表示する.
これをテストするテストケースを書くことができます.

it('should render welcome text', async () => {
  render(<App />);
  expect(screen.getByText('Welcome to our app')).toBeInTheDocument();
});

上記のテストは、我々の歓迎テストの同じ発生のためにテストします.
次の行は、変数をtrueに設定したときの2行目を示します.

it('should render first time text when set', async () => {
  render(<App firstTime={true} />);
  expect(
    screen.getByText('I see this is your first time!')
  ).toBeInTheDocument();
});

ご覧の通り、私はfirstTime 変数をtrueに設定します.
それで、上記はまだ成功します.
しかし、今、どうやってそれが存在しないかをテストできます.
まず、私たちが同じ構文を使用するとき、何が起こるかを見ましょう.not コール.

it(`shouldn't render first time text when set`, async () => {
  render(<App />);
  expect(
    screen.getByText('I see this is your first time!')
  ).not.toBeInTheDocument();
});

上記のテストを実行すると、次のエラーが発生します.

これは実際に使われてからgetBy . 我々は単に使用してこれを修正することができますqueryBy .

it('should render first time text when set', async () => {
  render(<App firstTime={true} />);
  expect(
    screen.queryByText('I see this is your first time!')
  ).toBeInTheDocument();
});

そして、それは我々が安全な方法で要素の非存在をチェックする方法です.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or