React test Utils, Simulate.click 不生效

#1

求教,我要对React做单元测试,我直接参考的是官网提供的test Utils,现在遇到的问题是,我的界面点击按钮后,会向后台发送数据,我现在模拟用户的点击,在服务器端没有收到任何消息,下面贴代码

describe('deep Rendering', function () {
    it('测试交互', function (done) {
        const app = ReactTestUtils.renderIntoDocument(<Login />);

        let inputs = ReactTestUtils.scryRenderedDOMComponentsWithClass(app, 'form-control');
        console.log(typeof inputs, inputs instanceof Array);
        for(let i = 0 ; i < inputs.length; i++){

            let obj = inputs[i];
            obj.value = '12312312';

            ReactTestUtils.Simulate.change(obj);
            console.log(obj.className, obj.value, obj.id);
        }

        const btns = ReactTestUtils.scryRenderedDOMComponentsWithClass(app, 'btn');

        console.log(typeof btns, btns instanceof Array);
        let btn = btns[0];

        console.log(btn.className, btn.id);
        ReactTestUtils.Simulate.click(btn); //这里模拟的用户输入


        setTimeout(function(){
            done();
        }, 1500);

    });
});

这是测试结果
mocha

[▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬․․․․․․․․․․․․․․․]object true
form-control 12312312 account
form-control 12312312 password
object true
btn btn-default submit
[▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬]

4 passing (2s)

但是我在服务器后台是没有收到任何消息,我现在可以确定的是确实找到了这个button,下面是html

<form className="form-horizontal" role="form">
                            <div className="form-group">
                                <label htmlFor="account" className="col-sm-2 control-label">Account</label>
                                <div className="col-sm-10">
                                    <input type="email" className="form-control" id="account">
                                    </input>
                                </div>
                            </div>
                            <div className="form-group">
                                <label htmlFor="password" className="col-sm-2 control-label">Password</label>
                                <div className="col-sm-10">
                                    <input type="password" className="form-control" id="password">
                                    </input>
                                </div>
                            </div>
                            <div className="alert alert-danger col-sm-offset-2" id="note" hidden="hidden">密码错误 </div>
                            <div className="form-group">
                                <div className="col-sm-offset-2 col-sm-10">
                                    <button type="button" className="btn btn-default" id="submit" ref="commit">Sign in</button>
                                </div>
                            </div>
                        </form>

有人可以帮助我吗,谢谢

#2
<form className="form-horizontal" role="form">
    <div className="form-group">
        <label htmlFor="account" className="col-sm-2 control-label">Account</label>
        <div className="col-sm-10">
            <input type="email" className="form-control" id="account">
            </input>
        </div>
    </div>
    <div className="form-group">
        <label htmlFor="password" className="col-sm-2 control-label">Password</label>
        <div className="col-sm-10">
            <input type="password" className="form-control" id="password">
            </input>
        </div>
    </div>
    <div className="alert alert-danger col-sm-offset-2" id="note" hidden="hidden">密码错误 </div>
    <div className="form-group">
        <div className="col-sm-offset-2 col-sm-10">
            <button type="button" className="btn btn-default" id="submit" ref="commit">Sign in</button>
        </div>
    </div>
</form>

我看到上面的html没有显示代码,这里补上

#3

经过测试,发现实际上与jquery有关,通过jquery的代码都无法在node环境正确的运行。
例如

<button id="commit1" className="sunlin" onClick={this.test1.bind(this)}>提交 </button>

通过这样的代码,我通过 Simulate.click 可以模拟点击,并且成功运行
但是下面的代码

$('#account').click(this.beforInput.bind(this));

通过Simulate.click,没有任何反应,实际上这行代码就没有正确的执行,我改为最上面的方式可以模拟点击,但在回调中也有jquery的调用,仍然无法正确执行,所以可以定位到是jquery的问题,那么,有人知道如何在node环境下已正确的方式加载jquery吗,我的jquery是这样加载的

if (typeof document === 'undefined') {
    const jsdom = require("jsdom");
    const { JSDOM } = jsdom;

    const { window } = new JSDOM(`...`);
    const { document } = (new JSDOM(`...`)).window;
    
    global.window = window;
    global.document = document;
    global.navigator = global.window.navigator;
    global.jQuery = global.$ = require('jquery');
}

谢谢