我是'.' (dot) syntax的新手，并尝试使用React和MochaTest对我的网页（反应组件）进行单元测试。页面非常简单，有两个必填字段名字和姓氏。如果两者都已填写，则应成功提交，如果只填写了一个，则不应提交并显示验证错误消息。
以下是代码段：
sinon：
NameTest.jsvar React = require('react')
var ReactAddons = require('react/addons')
var TestUtils = React.addons.TestUtils
var sinon = require("sinon");
describe('Name page component', function(){
it('should submit when all valid values are entered', function() {
var MochaMix = require('mocha-mix');
var sandbox = MochaMix.sandbox;
var stubContexts = MochaMix.stubContexts;
var stubRouter = stubContexts.createReactRouterStub(sandbox)
stubRouter.makeHref = sinon.stub.returns('/name')
var mix = MochaMix.mix({
require: '/src/page/name/NamePage'
, context: stubRouter
});
var namePage = mix.renderComponent()
var formElement = TestUtils.findRenderedDOMComponentWithTag(namePage, 'form')
var firstNameElement = TestUtils.scryRenderedDOMComponentsWithTag(formElement, 'input')[0].getDOMNode()
var lastNameElement = TestUtils.scryRenderedDOMComponentsWithTag(formElement, 'input')[1].getDOMNode()
React.findDOMNode(firstNameElement).value = 'Lansen';
TestUtils.Simulate.change(firstNameElement);
React.findDOMNode(lastNameElement).value = 'Lansen';
TestUtils.Simulate.change(lastNameElement);
var buttonElement = TestUtils.findRenderedDOMComponentWithTag(namePage, 'button')
TestUtils.Simulate.submit(formElement.getDOMNode())
var errorSpans = TestUtils.scryRenderedDOMComponentsWithClass(namePage, 'error-message')
var transitionToCall = namePage.context.router.transitionTo.getCall(0);
expect(errorSpans.length).to.equal(0);
expect(transitionToCall.args[0]).to.equal('name');
})
it('should show one error when only one of the fields is filled', function() {
var MochaMix = require('mocha-mix');
var sandbox = MochaMix.sandbox;
var stubContexts = MochaMix.stubContexts;
var stubRouter = stubContexts.createReactRouterStub(sandbox)
stubRouter.makeHref = sinon.stub.returns('/name')
var mix = MochaMix.mix({
require: '/src/page/name/NamePage'
, context: stubRouter
});
var namePage = mix.renderComponent()
var formElement = TestUtils.findRenderedDOMComponentWithTag(namePage, 'form')
var firstNameElement = TestUtils.scryRenderedDOMComponentsWithTag(formElement, 'input')[0].getDOMNode()
var lastNameElement = TestUtils.scryRenderedDOMComponentsWithTag(formElement, 'input')[1].getDOMNode()
React.findDOMNode(firstNameElement).value = 'Lansen';
TestUtils.Simulate.change(firstNameElement);
var buttonElement = TestUtils.findRenderedDOMComponentWithTag(namePage, 'button')
try{
TestUtils.Simulate.submit(formElement.getDOMNode())
}catch(err){
console.log('NamePage err.message :', err.message)
console.log('NamePage err.stack :', err.stack)
throw err
}
var errorSpans = TestUtils.scryRenderedDOMComponentsWithClass(namePage, 'error-message')
var transitionToCall = namePage.context.router.transitionTo.getCall(0);
expect(errorSpans.length).to.equal(0);
expect(transitionToCall.args[0]).to.equal('name');
})
});
的代码段：
NamePage.jsx当我尝试测试代码时，出现以下错误。该行发生此错误
- _onSubmit(e) {
e.preventDefault()
this.state.form.validate(this.refs.form, (err, isValid) => {
if (isValid) {
this.context.router.transitionTo('name', {}, {}, {
method: 'POST',
body: this.state.form.data
})
}
})
this.forceUpdate()
},
render() {
return <div>
<h1 className="heading-large">Your name</h1>
<form action={this.context.router.makeHref('name')} method="POST" onSubmit={this._onSubmit} ref="form" autoComplete="off" noValidate={this.state.client}>
{this.state.form.render()}
<button type="submit" className="button">Next</button>
</form>
</div>
}
中的TestUtils.Simulate.submit(formElement.getDOMNode())：
NameTest.js我已查看{{3}}并尝试将其应用于我的代码，但没有帮助我。不确定我是否已将其正确应用于我的代码。
非常感谢任何帮助。