无法使用 Mocha 和 Enzyme 测试 React useState 钩子

Question

我有一个登录组件，有两个输入，一个是用户名，另一个是密码。我对这两个输入都有 onChange 函数。我写了一些测试用例，效果很好。我需要编写更多测试用例，其中涉及对初始状态和更新后状态的测试。我研究了很多，但找不到适合使用 MOCHA 和酶进行 useState hooks 测试的示例。

我的最后一个测试用例失败了。 摩卡对我来说是强制性的。有什么帮助吗？

Login Component
----------------

import React from 'react'
import { Form, FormGroup, TextInput, Button } from 'carbon-components-react'
import Login16 from '@carbon/icons-react/lib/login/16'
import { PropTypes } from 'prop-types'

function LoginComponent(props) {
    const { username, password, onUsernameChange, onPasswordChange, onSubmit } = props;
    
    return (
        <div className="bx--row login-box">
            <div className="bx--col-xs-6 bx--col-sm-6 bx--col-md-6 bx--col-lg-6 login-form">
                <Form className="form-box">
                    <FormGroup legendText="Login">
                        <div>Sign in to your account</div>
                        <TextInput
                            className="login-input"
                            id="username"
                            name="username"
                            value={username}
                            onChange={onUsernameChange}
                            labelText=""
                            placeholder="User Name"
                            type="text"
                        />
                        <TextInput
                            className="login-input"
                            id="password"
                            name="password"
                            value={password}
                            onChange={onPasswordChange}
                            labelText=""
                            placeholder="Password"
                            type="password"
                        />
                        <Button
                            className=""
                            id="login-btn"
                            onClick={onSubmit}
                        >
                            <Login16 className="login-icon"/> Login
                        </Button>
                    </FormGroup>
                </Form>
            </div>
            <div className="bx--col-xs-6 bx--col-sm-6 bx--col-md-6 bx--col-lg-6 login-image">
                <img src="/ibmlogo.png" alt=""/>
            </div>
        </div>
    )
}

LoginComponent.propTypes = {
    username: PropTypes.string,
    password: PropTypes.string,
    onUsernameChange: PropTypes.func,
    onPasswordChange: PropTypes.func,
    onSubmit: PropTypes.func
}

export default LoginComponent

Login.test.js
-------------

import React from 'react'
import { shallow } from 'enzyme'
import chai, { expect } from 'chai';
import chaiEnzyme from 'chai-enzyme';
import { spy } from 'sinon'
import LoginComponent from '../components/Login';

describe('Login component testing', () => {
    const handleChange = spy();

    const props = {
        username: "",
        password: "",
        onUsernameChange: handleChange,
        onPasswordChange: handleChange,
        onSubmit: () => {}
    }

    const wrapper = shallow(<LoginComponent {...props}/>);
    let input;

    beforeEach(() => {
        input = ""
    })

    afterEach(() => {
    })

    it('Should have two inputs', () => {
        input = wrapper.find('.login-input');
        expect(input).to.have.length(2);
    })

    it('Should have one button to handle onSubmit', () => {
        input = wrapper.find('#login-btn');
        expect(input).to.have.length(1);
    })

    it('Should have an initial state for username and password to be empty string or undefined', () => {
        expect(wrapper.find("#username").prop('value')).to.equal('');
        expect(wrapper.find("#password").prop('value')).to.equal('');
    })

    it('Should have props for onUsernameChange, onPasswordChange, and onSubmit', () => {
        expect(wrapper.find('#username').props().onChange).to.not.be.an('undefined');
        expect(wrapper.find('#password').props().onChange).to.not.be.an('undefined');
        expect(wrapper.find('#login-btn').props().onClick).to.not.be.an('undefined');
    })
     //below test case is failing.
     it('Should update state for username and password onChange', () => {
         const func = wrapper.find('#username');
         func.simulate('change', { target: { value: "username" } })
         console.log(wrapper.find('#username').debug())
    expect(wrapper.find("#username").prop('value')).to.equal('username');
     })

    chai.use(chaiEnzyme());
    
})