Reactコンポーネントを正しくテストする方法は？

Question

反応成分を試験するとき、最良の実践とは何か、私は何を試験すべきですか？通常のテストでは、通常、正しい状態+入力が正しい状態+出力につながるかどうかをテストするだけです。

しかし、リアクタンスコンポーネントは少し異なります。それらには状態+小道具+ userInputがあり、状態+マークアップになります。

これは、多くの異なる可能性のあるシナリオにつながります。これらすべてのシナリオの結果の状態をテストする必要がありますか？ マークアップは大きくなる可能性があります。マークアップツリー全体が期待どおりになっているかどうかをテストする必要がありますか？それともその一部ですか？テストするマークアップのどの部分を決定するのですか？心に留めておくべき

Answer 1

まず明白なもの：

• あなたのコンポーネントのロジックは、モジュール内にカプセル化し、独立してテストすることができる場合は、それを行います。例：電卓コンポーネントの場合、計算自体はコンポーネントとは独立してテストできます。私はこれが明白であることを知っていますが、その点を確認するだけです。
• コンポーネントを小さなものに分割し、それぞれを細かくテストします。
  • 正しい小道具が正しい出力をレンダリングする場合は（HTML）：コンポーネント、常にテストについて

  。

• 正しいユーザー操作（クリック、キー押下など）が適切なイベントを発生させ、正しい出力（HTML）につながる場合。私は通常、単体テスト時にコンポーネントの状態を扱っていませんが、これは良い方法ではありません。テレビをテストするには、テレビを開く必要はありません。

Reactコンポーネントのテストに使用するライブラリが不明な場合は、Enzymeを強くお勧めします。彼らのGitHubのページから

例：

describe('<MyComponent />',() => { 
    it('renders three <Foo /> components',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find(Foo)).to.have.length(3); 
    }); 

    it('renders an `.icon-star`',() => { 
    const wrapper = shallow(<MyComponent />); 
    expect(wrapper.find('.icon-star')).to.have.length(1); 
    }); 

    it('renders children when passed in',() => { 
    const wrapper = shallow(
     <MyComponent> 
     <div className="unique" /> 
     </MyComponent> 
    ); 
    expect(wrapper.contains(<div className="unique" />)).to.equal(true); 
    }); 

    it('simulates click events',() => { 
    const onButtonClick = sinon.spy(); 
    const wrapper = shallow(
     <Foo onButtonClick={onButtonClick} /> 
    ); 
    wrapper.find('button').simulate('click'); 
    expect(onButtonClick).to.have.property('callCount', 1); 
    }); 
});