So, what you are really trying to test is that based on some mock data it "should render correctly ...".

As some people pointed out, a good way to achieve that is by placing the data fetching logic into a separate container and have a "dumb" presentation component that only knows how to render props .

Here is how to do that: (I had to modify it a bit for Typescript with Tslint, but you'll get the idea)

export interface Props { // tslint:disable-next-line:no-any records: Array<any>; } // "dumb" Component that converts props into presentation class MyComponent extends React.Component<Props> { // tslint:disable-next-line:no-any constructor(props: Props) { super(props); } render() { return ( <div className="async_component"> {this._renderList()} </div> ); } _renderList() { // tslint:disable-next-line:no-any return this.props.records.map((record: any) => { return ( <div className="record" key={record.name}> <p>{record.name}</p> <p>{record.utility}</p> </div> ); }); } } // Container class with the async data loading class MyAsyncContainer extends React.Component<{}, Props> { constructor(props: Props) { super(props); this.state = { records: [] }; } componentDidMount() { fetch('/some/url/that/returns/my/data') .then((response) => response.json()) .then((data) => { this.setState({ records: data.records }); }); } // render the "dumb" component and set its props render() { return (<MyComponent records={this.state.records}/>); } }