我有一个测试,它只是试图在反应组件渲染时测试页面上的内容,它看起来像这样
Prospects.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())
是
我的组件是:
Prospects.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()但它不起作用,因为道具没有设置。