[英]react state is not updating in jest
In my react component I have two functions.在我的反应组件中,我有两个功能。 handleChangeInput(e) is called on 'OnChange' of input field and checkFields() is called from handleChangeInput(e)在输入字段的“OnChange”上调用 handleChangeInput(e),从 handleChangeInput(e) 调用 checkFields()
constructor(){ super() this.state={ email: '', password:'', validFields: false } } handleChangeInput(e){ const name = e.target.name; const value = e.target.value; this.setState({[name]: value},()=>{ this.checkFields(); }); } checkFields(){ if (this.state.email.length>0 && this.state.password.length>0 ) { this.setState({validFields: true}); }else { this.setState({validFields: false}); } }
And in my index.test.js I have在我的 index.test.js 我有
describe('<Login />', () => { describe('handleChangeInput', () => { const component = new Login() const wrapper = shallow(<Login />); beforeEach(() => { component.setState = jest.fn() }) test('calls setState validFields false when no email/password', () => { const state = { state : { email: '', password: ''} } const args = { target : { name: 'name', value: 'value' } } component.handleChangeInput.call(state, args) expect(component.setState.mock.calls.length).toBe(1) expect(wrapper.state().validFields).toEqual(false) }) test('calls setState validFields true when email/password are ok', () => { const state = { state : { email: 'email', password: 'password' } } const args = { target : { name: 'name', value: 'value' } } component.handleChangeInput.call(state, args) expect(component.setState.mock.calls.length).toBe(1) expect(wrapper.state().validFields).toEqual(false) }) }) });
But my state is not being updated.但是我的状态没有被更新。 As a result, 'validFields' is not set to true and my second test is failing.结果,'validFields' 未设置为 true,我的第二个测试失败。 I tried wrapper.update() and wrapper.instance().forceUpdate() but still no success.我尝试了 wrapper.update() 和 wrapper.instance().forceUpdate() 但仍然没有成功。 Any help would be appreciated任何帮助将不胜感激
I am guessing it might be because you override the setState function with jest.fn()我猜这可能是因为你用 jest.fn() 覆盖了 setState 函数
component.setState = jest.fn()
})
how about removing this?去掉这个怎么样?
hope my answer does not come too late, but you are trying to update the state in a wrong way.希望我的回答不会太晚,但您正试图以错误的方式更新状态。
First of all, remove these two:首先,删除这两个:
const component = new Login()
beforeEach(() => {
component.setState = jest.fn()
})
And most likely you want to change this:很可能你想改变这个:
handleChangeInput(e){
const name = e.target.name;
const value = e.target.value;
this.setState({[name]: value},()=>{
this.checkFields();
});
}
handleChangeInput(e){
const name = e.target.name;
const value = e.target.value;
this.setState(()=>{
return { email: name}
});
this.setState(()=>{
return { password: value }
});
this.checkFields();
}
const component = new Login() does not bring any value to this test and you should not mock the setState if you want that it's actually changed. const component = new Login() 不会为该测试带来任何价值,如果您希望 setState 实际已更改,则不应模拟它。
Instead you should test the actual component (like you partially already do here)相反,您应该测试实际组件(就像您在这里已经部分完成的那样)
Change the code like this:像这样更改代码:
test('calls setState validFields true when email/password are ok', () => {
const args = { target : { email: 'email', password: 'password' } }
wrapper.instance().handleChangeInput(args)
expect(wrapper.state('email')).toEqual('email')
expect(wrapper.state('password')).toEqual('password')
expect(wrapper.state('validFields')).toBeTruthy()
})
I found this answer in one of the git forums.我在其中一个 git 论坛中找到了这个答案。 It worked for me.它对我有用。
// somewhere in your test setup code
global.flushPromises = () => {
return new Promise(resolve => setImmediate(resolve))
}
test('something with unreachable promises', () => {
expect.hasAssertions()
const component = mount(<Something />)
// do something to your component here that waits for a promise to return
return flushPromises().then(() => {
component.update() // still may be needed depending on your implementation
expect(component.html()).toMatchSnapshot()
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.