反応成分を正しく試験するには？

Question

最近、私は冗談と酵素と反応をテストするために学んでいるが、私のコード、ユニットテストがそれを何であるかを理解するのは難しいようだ

import React from "react"; 

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     value: "" 
    }; 
    this.handleChange = this.handleChange.bind(this); 
    } 

    handleChange(e) { 
    const value = e.target.value; 
    this.setState({ 
     value 
    }); 
    } 
    render() { 
    return <Nest value={this.state.value} handleChange={this.handleChange} />; 
    } 
} 

export const Nest = props => { 
    return <input value={props.value} onChange={props.handleChange} />; 
}; 

export default App; 

と​​を嘲笑IMO

import React from "react"; 
import App, { Nest } from "./nest"; 

import { shallow, mount } from "enzyme"; 

it("should be goood",() => { 
    const handleChange = jest.fn(); 
    const wrapper = mount(<App />); 
    wrapper.find("input").simulate("change", { target: { value: "test" } }); 
    expect(handleChange).toHaveBeenCalledTimes(1); 
}); 

、私のテストこれは完全に間違っている場合は、モックFNを使用して​​が呼ばれるテストするための正しい方法は何だ、 Appに

を​​をインターセプトします。

別：私たぶん私は別に2つのコンポーネントをテストする必要があり 、多くのことを検索似たような状況を読んで、これはcontra-Unit Testであるように思える、
、私は両方のコンポーネントをテストすることができ、によって テスト
<Nest value={value} handleChange={handleChange} />
手動で小道具を渡し、次にhandleChangeをシミュレートして呼び出すchange
それはテストに合格しました。
どうすれば2つの間の接続をテストできますか？ は、私はいくつかの作業が反応私はこのケースでテストする必要がどの部分かわからない

チームの作業 ...で、どの部品reactが既にテストされません

を読みます私はテストする必要があります。それは混乱している。

Answer 1

あなたは、入力の変化が伝播されていることを確認するために、小道具としてあなたの嘲笑handleChangeを渡して、第1の素子分離にNestコンポーネントをテストするためのパスを取る必要があります。

あなたは状態の一部をテストしたい場合は、あなたが酵素からあなたのAppクラスのinstanceを取得することができますし、直接そのメソッドを呼び出します。

it("should update the Nest value prop when change is received",() => { 
    const wrapper = mount(<App />); 
    const instance = wrapper.instance() 
    instance.handleChange({ target: { value: "test" } }) 
    const nestComponent = wrapper.find("Nest").first()  
    expect(nestComponent).prop('value').toEqual('test'); 
}); 

これはほとんどの試験片に必要ではない、非常に非常に基本的なそれはあなたの後になっている場合は、テストカバレッジを取得します。例えば

ドク：http://airbnb.io/enzyme/docs/api/ReactWrapper/instance.html

---