在Jest中呈现React组件返回null
Rendering a React component in Jest returns null
我很难用Jest编写测试单元:/这是我的代码:
import { NewRec } from '../src/components/edit';
import { shallow } from 'enzyme';
import React from 'react/lib/ReactWithAddons';
jest.mock('react-dom');
jest.mock('react/lib/ReactDefaultInjection');
describe('NewRec component', () => {
const component = shallow(<NewRec />);
it('returns true if blah blah', ()=>{
const p = component.find('errortitle');
expect(p.length).toEqual(1)
});
});
p总是0。我试着检查组件在渲染后的样子。问这里的问题:(如何看到在Jest单元测试中渲染的React组件是什么样子?)快照文件显示为空:
exports[`NewRec component returns true if blah blah 1`] = `null`;
为什么总是null呢?代码中的问题是什么?"NewRec"组件正在使用mixins (mixins: [React.addons.LinkedStateMixin]
)。这会导致问题吗?
更新:这是组件代码:
export const NewRec = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState() {
return {
group_id: null,
title: "",
errors: {},
}
},
createRec(event) {
event.preventDefault();
if (!this.state.title.length) {
this.setError('title', "Please add a title");
return;
}
if (!this.state.group_id) {
this.setError('group', "Please select a group");
return;
}
serverCache.createRec(
{ group: this.state.group_id, title: this.state.title },
rec => { browser.gotoRec(rec.id); }
);
},
selectgroup(group_id) {
this.setState({group_id: group_id});
},
rendergroupList(groups) {
return (
<div > { groups.map(this.rendergroup) } </div>
);
},
onTitleChange(event) {
this.setState({title:event.target.value});
},
componentWillMount() {
const user = serverCache.getUser();
if (!user || !user.get('name')) {
notifications.warning('Please login first.');
}
},
render() {
const user = serverCache.getUser();
const groups = serverCache.getgroups();
return (
<div className="row">
<form className="form-horizontal" onSubmit={this.createRec}>
<label htmlFor="title" className="col-sm-3 control-label"> Title </label>
<div>
<input type="text" id='title' value={this.state.title} onChange={this.onTitleChange} />
</div>
<div>
<label htmlFor="group" className="col-sm-3 control-label" >group </label>
</div>
<div>
{this.state.errors.title ? <div id='errortitle' >{this.state.errors.title} </div>: false }
{this.state.errors.group ? <div id='errorgroup' >{this.state.errors.group} </div> : false }
<div >
<button type="submit" className="btn btn-primary btn-default btn-block"> Create Rec</button>
</div>
</div>
</form>
</div>
);
}
});
我认为 component.find('new-rec').length
是0,因为没有new-rec
组件,标签,或者你正在寻找的任何东西,我的意思是,当我看到这个代码const p = component.find('new-rec');
时,我明白你正试图获得一个p标签与new-rec类或类似的东西,但是如果你正在寻找一个类,那么你必须做const p = component.find('.new-rec');
注意de点之前de word (css选择器)。但它将再次为0,因为我没有看到任何带有的p标签。NewRec组件中的new-rec类
相关文章:
- 在浅层渲染的反应组件上,Enzyme为道具返回null
- 通过返回键进行跨组件通信
- 秘银组件不返回任何内容
- React 组件中的字符串插值,其中包含从服务器返回的字符串
- 通过返回输入的组件接收 onPaste / onChange
- 如何让我的组件返回自身的序列化
- 我的PlayFramework Action在Future准备就绪之前返回,如何更新网页组件
- 将控制器操作传递给EmberJS中的组件会返回未定义的结果
- 如何使用react.js返回多个列表组件
- 在Jest中呈现React组件返回null
- FireFox中HTML/iframe错误-组件返回失败代码:0x80004005 (NS_ERROR_FAILURE)
- Vue.js "选项应该是一个在组件定义中返回每个实例值的函数
- React无状态功能组件的流返回类型是什么?
- React组件方法this.state.myState从child返回后未定义
- 组件返回失败码:0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsIDOMEventTarg
- 从React组件返回RSS
- 组件返回失败码:0x80040111 (NS_ERROR_NOT_AVAILABLE)
- 如何从React组件返回值
- React组件返回无法读取属性'__尝试访问数组后为null的reactInternalInstance$
- 不能卸载React组件,从父组件返回false