テストライブラリのデバッグ

彼らがしばしば起こると予想しなかった何かに失敗するので、デバッグテストは速い悪夢になることができます.
幸運にも、私たちのために、テストライブラリは、我々が活用することができるデバッグのためのいくつかの大きなオプションを持っています.
ここでは、主にDOMレンダリングデバッグに焦点を合わせます.

標準デバッグ

最も標準的な場合、テストライブラリは失敗した要素を出力します.その出力で何が間違っていたかもしれません.
しかし、重大なDOM要素をテストするとき、これは完全に見えないかもしれません.あるいは、あなたが見る必要がある実際の要素を見ることができません.
次のアプリコードを見ましょう.

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

そして、何が起こるかを見るために失敗したテストを書きましょう.

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

上記のイメージで見ることができるように、我々は簡単にエラーをスローします.
このファイルが大きくなったとしましょう.我々は、我々がそうである必要があるパーティーで切られることができました.
このオプションの1つは、デバッグラインの環境変数を拡大することです.(デフォルト7000 )
次のようになります.

DEBUG_PRINT_LIMIT=10000 npm test

ドムをきれいにする

もう一つの優れたデバッグオプションはprettyDOMです.レンダリングのきれいなレンダリングバージョン.

import { prettyDOM, render } from '@testing-library/react';

it('should render prettyDOM', async () => {
  const { div } = render(<App />);
  console.log(prettyDOM(div));
});

ご覧の通り、2番目の実際のテストを削除しました.
これで次の出力が表示されます.

ログロールの使用

これは私が最近だけ学んだ超クールな機能です.
これはレンダリングされたDOM内のすべてのアリアの役割のリストを出力することができます.
また、byRoleを使用することができます要素を見つけるために使用することができます.
次のようにアプリケーションを変更することから始めましょう.

function App({ firstTime = false }) {
  return (
    <nav className='App'>
      <ul>
        <li>
          <button>Button 1</button>
        </li>
        <li>Random text</li>
      </ul>
    </nav>
  );
}

現在、すべてのアクセス可能な要素を見つけるためにlogRolesを使用できます.

import { logRoles, render } from '@testing-library/react';

it('should show logRoles', async () => {
  const { container } = render(<App />);
  logRoles(container);
});

を返します.

のナビゲーション:<nav>要素

のリスト:<ul>要素

の文書:<li>要素2回

ボタン:<button>要素

このコンポーネント内で使用可能なロールをすばやく見ることができます.

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

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