如何正確測試反應組分？

-1

最近我學習測試用開玩笑和酶反應，這似乎很難理解一個單元測試是什麼，我的代碼如何正確測試反應組分？

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;

和我的測試

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

海事組織，嘲笑將攔截對App,

如果這是完全錯誤的，那麼使用mock fn和測試被調用的正確方法是什麼。

另一個：我搜索了很多，看了類似的情況，似乎這是contra-Unit Test，
也許我應該分開測試兩個部分，我可以測試組件，測試
<Nest value={value} handleChange={handleChange} />
通過手動傳遞道具，然後handleChange模擬change
它通過測試。
但我如何測試兩者之間的連接？我讀

一些工作作出反應小組的工作 ...

我不知道我在這種情況下，以測試哪些部分，以及哪些部分react已經測試並沒有需要我來測試。這很混亂。

來源

2017-06-30 Liuuil

您應該首先單獨測試Nest組件的路徑，將您的模擬handleChange作爲道具傳遞，以驗證輸入更改是否正在傳播。

如果你想測試狀態的一部分，那麼你可以從酶得到你的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

來源

2017-07-01 15:56:40 CharlieBrown

如何正確測試反應組分？

回答

相關問題