Javascript 反应组件内的测试方法

我正在尝试用酶测试react类方法。该方法应处理输入上的更改并设置状态。我收到一个错误“无法读取未定义的属性”setState“

component.js

class LoginPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };

        this.handleChange = this.handleChange.bind(this);

        ...
    }

    handleChange(event) {
        this.setState({[event.target.name]: event.target.value})
    }

    ...

    return(
        ...
        <TextField name='username' onChange={this.handleChange} />
    )

类登录页扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户名：“”，
密码：“”
};
this.handleChange=this.handleChange.bind（this）；
...
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）
}
...
返回(
...
)

test.js

it('handles change', () => {
    const spy = sinon.spy(LoginPage.prototype, 'handleChange');
    const _wrapper = shallow(<LoginPage />);

    spy({
            event: {
                target: {
                    name: 'username',
                    value: 'username'
                }
            }
        }
    );

    expect(_wrapper.state().username).to.equal('username');
})

it（'处理更改'，（）=>{
const spy=sinon.spy（LoginPage.prototype，'handleChange'）；
const_wrapper=shallow（）；
间谍({
活动：{
目标：{
名称：“用户名”，
值：“用户名”
}
}
}
);
expect（_wrapper.state（）.username）.to.equal（'username'）；
})

---

}))

在我回答之前，请注意，还有其他一些编写组件的方法，可以更容易地编写这些测试（并且更好地使用spies/stub）。例如，您可以将“onChange”道具传递给组件，并使用该道具

因此，回答这个问题，您正在调用一个没有“绑定”到任何东西的函数。您的

此

（在您创建的间谍中）是

未定义的

，这就是您出现以下错误的原因：

无法读取未定义的属性“setState”

解决此问题的一个简单方法是调用“bind”函数：

请注意，您需要导入“TextField”组件，以便正确执行“find”

从“../path/to/TextField.jsx”导入TextField；
它（'处理更改'，（）=>{
const_wrapper=shallow（）；
_wrapper.find（TextField.simulate（'change'）{
目标：{
名称：“用户名”，
值：“用户名”，
},
});
expect（_wrapper.state（）.username）.to.equal（'username'）；
});

---

这样，

simulate（'change'）

将调用

onChange

，并传递参数。在这种情况下，

onChange

将调用

handleChange

，这次使用

this

“bind”正确。

如果您尝试此

this.handleChange（e）}/>

，顺便问一下，您的渲染方法在哪里？我得到

类型错误：即使运行restore（），也尝试包装已包装的handleChange

在间谍和测试结束时。我不希望修改组件以使测试在最合法的代码中工作。我删掉了一些代码，

…

代表了这些代码，因此呈现在那里，组件呈现得很好，因此您的组件实际上正在工作。您只是在集成测试时遇到了问题。对吗？没错。无法确定是传入了什么才是问题所在，还是我需要模拟构造函数。