玩笑和酶反应成分方法的测试案例

Question

我是单元测试的新手。 我有一个反应成分

 export default class Login extends Component{ constructor(){ super() this.state={ email: '', password:'', validFields: false } this.handleChangeInput = this.handleChangeInput.bind(this); } handleChangeInput(e){ const name = e.target.name; const value = e.target.value; this.setState({[name]: value}); if (this.state.email.length>0 && this.state.password.length>0 ) { this.setState({validFields: true}); } else { this.setState({validFields: false}); } } render() { return ( <div> <form onSubmit={this.handleLoginSubmit}> <div className="input"> <input id="email" type="text" name ="email" placeholder="Email" value={this.state.email} onChange={this.handleChangeInput}/> </div> <div className="input"> <input id="password" type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChangeInput}/> </div> <input id="submitButton" type="submit" value ="LOG IN" disabled={!this.state.validFields}/> </form> </div> ) } } 

现在，我要测试功能handleChangeInput（e）。 谁能帮助模拟该功能的测试用例？ 我正在开玩笑和酶。

Answer 1

首先，您的方法进行了2次setState调用，这是次优的。

要在一个jest测试用例中对其进行测试，您可以遵循此指南（阅读jest文档以了解如何编写更好的测试https://facebook.github.io/jest/docs/en/tutorial-react.html ） ：

describe('<Login>', () => {

    describe('handleChangeInput', () => {

        const component = new 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(2)
            expect(component.setState.mock.calls[1][0]).toEqual({validFields: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(2)
            expect(component.setState.mock.calls[1][0]).toEqual({validFields:true})
        })
})

（代码未经测试）