Question

我有一个类似于以下内容的包装器组件：

/* 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')功能不再返回任何这些节点。任何建议都表示赞赏。

使用createContainer（React.PureComponent）创建的酶查找节点

0 个答案: