0

我有一个测试只是试图测试反应组件呈现时页面上的内容，它看起来像这样

前景.tests.js

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { shallow } from 'enzyme';
import { chai } from 'meteor/practicalmeteor:chai'
import { Random } from 'meteor/random';

import { Residents } from '/imports/collections/residents.jsx';
import Prospects from "/imports/client/ui/prospects/Prospects";

if (Meteor.isClient) {
  describe('Prospects', function() {
    it('renders with no prospects', function() {

      const item = shallow(<Prospects />);
      const node = item.find('table')
      chai.assert(node.hasClass('no-prospects'))
    });
  });
}

问题是，此时我的集合仍在加载，所以当我控制台记录 html 时，所有酶都会看到：

console.log(item.html())

是

html

我的组件是：

前景.jsx

import React from 'react'
import { FlowRouter as Router } from 'meteor/kadira:flow-router'
import { createContainer } from 'meteor/react-meteor-data'
import { Residents } from '/imports/collections/residents.jsx'
import Griddle from 'griddle-react'

class Prospects extends React.Component {
  componentWillReceiveProps(props){
    this.setState({prospects: props.prospects})
  }

  render() {
    if(!this.props.ready){
      return(
        <span>Loading...</span>
      )
    }

    return(
      <div><Griddle results={this.state.prospectsshowFilter={true}/</div>
    )
  }
}

export default createContainer(() => {
  const residents = Meteor.subscribe('residents')
  const ready = residents.ready()
  return {
    prospects: ready ? Residents.find({}).fetch(): [],
    ready: ready,
  }
}, Prospects)

所以我的两个问题是：

1）有没有更好的方法来确保加载道具，所以我不必显示“正在加载...”

2）在酶中，有没有一种方法可以在加载道具后重新渲染？我尝试使用 item.update() 但它不起作用，因为没有设置道具。

4

0 回答 0