我有一个类似于以下内容的包装器组件:
/* Some imports here */
class Wrapper extends React.Component {
renderChildren() {
const { children } = this.props;
return children.map(child =>
<Child key={child._id} />
);
}
render() {
return (
<div>
{this.renderChildren()}
</div>
);
}
}
Wrapper.propTypes = {
children: React.PropTypes.array,
}
export default createContainer(() => {
let children = [];
const subscriptions = [
Meteor.subscribe('Collection.all'),
/* ... */
];
if (subscriptions.every(sub => sub.ready()) {
/* Some irrelevant code here */
children = Collection.find({}).fetch();
}
return { children };
}, Wrapper);
Child组件类似于:
/* Some imports here */
class Child extends React.Component {
render () {
return (
<div></div>
);
}
}
export default createContainer(() => {
/* Some irrelevant code here that has to stay in createContainer (and not constructor)*/
}, Child);
我正在尝试编写一个测试,每当将Document插入Collection时,我会比较Wrapper中Child组件的长度(数量)是否正确递增。之前,当我不需要在我的子元素中使用createContainer时,以下内容:
it('should render with some children and reactively update with them', () => {
let children = [];
_.times(4, () => children.push(Factory.create('doc'));
const wrapper = mount(
<Wrapper />
);
chai.assert.notEqual(wrapper.find('Child').length, children.length);
wrapper.setProps({ children });
chai.assert.equal(wrapper.find('Child').length, children.length);
}
按预期工作但是当我为子元素添加createContainer
时,之前工作的测试也开始失败。似乎酶的find('Child')
功能不再返回任何这些节点。任何建议都表示赞赏。