どのように反応のレンダリングの数をテストしますか?

TLドクター
性能を測定するために、新しい反応テストライブラリであるreact-performance-testingを紹介します.

なぜ?
あなたが高性能機能を開発しているならば、あなたは貸し手の数に関するテストを書くか、時間を与えたいです.しかし、我々は手動でdevtoolsや灯台をチェックしなければならないし、これらのケースを自動的にテストできませんでした.その上、我々は神経質になることなく再貸出を予測することができません.反応性能試験はこれらの場合の解決策を提供する.

解決策
反応性能テストは、上記の問題の解決策として簡単で簡単な方法を提供します.それは猿のパッチ反応でいくつかの機能を提供します.我々は、貸し手の数をカウントすることができますし、同様にレンダリング時間を測定し、我々はこれらの値を使用してテストすることができます.

使い方
あなたはperfとwaitメソッドを使用することができます.perf法は、レンダリング性能を測定するために使用される.このlibは、自分のコンポーネントを内部でラップすることによってパフォーマンスをレンダリングします.しかし、このコンポーネントは非常に小さいので、このコンポーネントはコンポーネントに影響しません.
レンダリング処理が完了すると、waitのメソッドが使用されます.これは、レンダリング後のリポジトリ性能が終了するためである.
あなたはBellowとして使用することができます.

import React from 'react';
import { render, fireEvent, screen } from '@testing-library/react';
import { perf, wait } from 'react-performance-testing';

test('should render two times when count button is clicked', async () => {
  const Button = ({ name, onClick }) => (
    <button type="button" onClick={onClick}>{name}</button>
  );
  const Counter = () => {
    const [count, setCount] = React.useState(0);
    return (
      <div>
        <span>{count}</span>
        <Button name="count" onClick={() => setCount(c => c + 1)}/>
      </div>
    );
  };

  // This lib monkey patches React in perf method.
  // So, you need to pass React module.
  const { renderCount } = perf(React);

  fireEvent.click(screen.getByRole('button', { name: /count/i }));

  // renderCount.current have each component name object,
  // and it have number of renders in its `value` property.
  await wait(() => {
    expect(renderCount.current.Counter.value).toBe(2);
    expect(renderCount.current.Button.value).toBe(2);
  });
});

waitメソッドを使用することに注意してください.これは、反応のレンダリングプロセスが完了した後にrenderCountが値に割り当てられるからです.

感謝
読書ありがとうございます.
あなたがレンダリングの数についてテストする場合は、それを試してください!
このlibがあなたの役に立つでしょう.
リポジトリ:https://github.com/keiya01/react-performance-testing