How to test React/Flux components state?

I'm pretty new to testing, so maybe I'm considering testing things that shouldn't be tested.

I have a top level component 'App' that gets it's state from a store, which is updated via an ajax request on component mount. I thought a useful test would be to check that the App component's state is not empty after the ajax request (an action) is made. Is there a way to test a component's state before and after an action?

From what I understand, you don't test the actual functionality of your application, but make mocks of the components and their functionality and then test that. If that works, you assume that your real application must work. I'm not sure how to mock a component that is linked to actions and stores.

If I shouldn't be testing for state, what would be good things to test a component for? There aren't really any user interactions so far.

Here is the component code without the store/action code:

import React from 'react';
import {Component} from 'react';
import {FETCH_DATA} from '../actions/types';
import MapStore from '../stores/MapStore';
import dispatcher from '../dispatcher';
import * as MapActions from '../actions/index';


export default class App extends Component {
  constructor() {
     super();

this.state = {
  meteorites: MapStore.getAll()
}

// Bind methods to 'App'
this.updateData = this.updateData.bind(this);

}

componentWillMount() {

  // fetch initial meteorites on page load
  this.fetchData();

  // if change event was emitted, re-render component
  MapStore.on('change', this.updateData);

}

fetchData() {
  // Kick off a fetchData action (api request)
  MapActions.fetchData();
}

componentWillUnmount() {
  MapStore.removeListener('change', this.updateData);
}

updateData() {
 this.setState({
   meteorites: MapStore.getAll()
 });
}

render() {

  //console.log("state", this.state.meteorites);

  return (
    <div className="app-container">Meteorite Landings</div>
  );
 }
}