トラブルがない

これは、反応成分の塊のシリーズの最終的な部分です.我々は、要約とラップして、あなたが遭遇するいくつかの一般的な困難を見ていきます.
このポストのすべてのコードサンプルは、以下のレポで利用できます.

dirv / コンポーネントをmocking反応

コンポーネントをモックアップする方法の例

モックは悪名高く難しいテスト施設です.そういうわけで、一部の教育者は、彼らを使わないで、彼らを教えません.
しかし、マスターを習得すると、脆い、時間の沈没テストと戦うために余分な武器を与える.
それで、どのように、あなたはモックで安全なままでいることを確実とすることができますか?シンプル:パターンにスティック!

パターンに固執する

あなたがこのシリーズであなたに示したパターンに固執するならば、あなたは問題を抱えてはいけません.
Aをレンダリングする基本的なmock機能で始めてくださいdiv とdata-testid 添付.これを見た.

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(() => (
    <div data-testid="PostContent" />
  ))
}))

必要な場合は、レンダリングすることができますchildren も.これについては.

   jest.mock("../src/PostContent", () => ({
     PostContent: jest.fn(({ children }) => (
       <div data-testid="PostContent">{children}</div>
     ))
   }))

本当に必要な場合は、prop値を使用して一意にすることができますdata-testid しかし、これはしばしば不必要な複雑さです.それであった.

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(({ children, id }) => <div data-testid={`PostContent-${id}`}>{children}</div>)
}))

私は常に避けるためにあらゆる種類のアドバイスを与えることを嫌い:すべてのテクニックは、その場所があります.しかし、私が注意しなければならない1つのものを命名することになっているならば、私はそれが偽物を構築していて、特にJest機能の使用であると言いますmockImplementation .
なぜ?さて、スパイとスタブを使用する主要な理由は、あなたを遅くしない独立したテストスイートを構築するのを助けることです.
重要な方法は、コードを少数のパターンに制限することです.コーディング規約のセットを持っているが、より高いレベルで少し似ています.
あなたが偽物と精巧な模擬実装を構築し始めると、今あなたのテスト内のロジックを持っているので、あなたはその目標から離れて移動している:あなたはそれらを見てすぐに知ることができない彼らはどのように動作します.そして、生産コードへのどんな変更も、必然的にそれを変える前に、偽の実装コードを再理解する必要があります.
逆に、あなたが私があなたに示した模擬パターンの一握りに固執するとき、あなたは彼らを利用するテストを書くことでより速くてより速くなるでしょう.それはあなたがパターンを認識し、再表示するたびにあなたの脳でそれらを評価する必要はありませんので.

どのようなパターンのいずれかのテストスイートに動作しますか？

あなたが立ち往生しているならば、あなた自身に尋ねる最初の質問はそうです:テスト可能な方法は、私の生産コードです?
それはあなたが痛みをテストしているが、テスト不能性のために構造化されていない生産コードではない塊です.

コードのテスト容易性の改善

私がcodebaseで反応する数の問題は多くの異なった考えを表現する非常に大きな構成要素です.多くの場合、新しい機能は、単に抽象化を整理したり、論理的な組織構造を見つけるのではなく、お互いの上に積み重ねられています.
だから良い場所を開始するには、離れて大規模なコンポーネントを分割することです.
どのくらい大きいですか.ファイルのサイズは、しばしば使用する良い測定値です:私にとって、100行以上の何かが疑わしいです.そして、私の構成要素の多くは、サイズで10行未満です!
どのようにコンポーネントを分割する方法は明らかではないですか?単一の責任原則を起動します:各コンポーネントは1つのことと1つだけのことを行う必要があります.
もちろん、1つの“もの”の概念はあなた自身をハングアップするロープをたくさん残します.エレガントな「もの」を考え出すことは、ソフトウェア設計の難しさの大部分です.
あなたがこの話題に興味があるならば、私はカップリング、結束とconnascence , すべての反応成分に適用される場合でも、頻繁に反応して教育者がそれらについて話して聞くことはありません.

ここからどこへ行くか

このシリーズでは、私はあなたに反応成分をテストする非常に特定の方法を示しました.あなたがこれらのテクニックについてより詳細な理論と歴史に興味があるならば、それから私の本を見てください.Mastering React Test-Driven Development . これは反応テストライブラリを使用していない代わりに、最初の原則からテストを探る.それを行うことは成功した反応テストのあなたのより深い理解を与える.