如何正确测试反应组分？

-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

如何正确测试反应组分？

回答

相关问题