gistfile1.js

// Declarative
const App = () => (
  <Fetch url="/users">
    {({ data, loading }) => loading ? (
      <div>Loading...</div>
    ) : (
      <Filter data={data}>
        {rows=> (
          <Graph rows={rows}/>
        )}
      </Filter>
    )}
  </Fetch>
)

// A bit imperative, and every time you want to use fetch
// you're gonna be doing this loading junk too
class App extends React.Component {

  state = {
    rows: [],
    loading []
  }

  componentDidMount() {
    fetch('/users').then(data => {
      const rows = filter(data)
      this.setState({ rows, loading: false })
    })
  }

  render() {
    return this.state.loading ? (
      <div>Loading ...</div>
    ) : (
      <Graph rows={this.state.rows}/>
    )
  }
}

// or the redux version
const fetchUsers = () => (
  // doin' that thunk stuff
  (dispatch) => (
    dispatch({ type: LOAD_USERS })
    fetch('/users').then(data => {
      dispatch({ type: USERS_LOADED, data })
    })
  )
)

class App extends select(state => ({
  rows: state.users.results,
  loading: state.users.loading
}))(React.Component {

  componentDidMount() {
    this.props.dispatch(fetchUsers())
  }

  render() {
    return this.props.loading ? (
      <div>Loading ...</div>
    ) : (
      <Graph rows={filter(this.props.rows)}/>
    )
  }
}

Do you have any examples of testing render callback components like the Fetch component above?