Testing a component after state has been updated in componentDidMount using enzyme jest react-native -

i have component in react-native

export default class searchresultsscreen extends component {    constructor(props){       super(props);       this.state = {         centres: [],       };   };     componentdidmount() {         let searchurl =`${hostname}centres_search/`;         let lat = this.props.origin_lat;         let long = this.props.origin_long;         let distance = this.props.distance;         let url = `${searchurl}origin_lat=${lat}&origin_long=${long}&distance=${distance}`         console.log('before fetch called');         fetch(url)           .then((response) => response.json())           .then((responsejson) => {              console.log('before state updated '+responsejson[0].name);              this.setstate({               centres: responsejson,              });              console.log('after fetch called '+responsejson[0].name);           })           .catch((error)=>{              console.log('error '+error);              this.setstate({                centres: [],              });           });    }     static navigationoptions = {       title: 'centers',       headertitlestyle: navigationheaderstyle    };     render() {       let centreslist;       if(typeof this.state.centres == 'undefined' ||           this.state.centres.length == 0) {           centreslist = <text>no results found</text>       } else {          centreslist = <flatlist              data={this.state.centres}              keyextractor={(item, index) => item._centre_id}              renderitem={({item}) => <centrecomponent centre={item}/>}              itemseparatorcomponent={() => <listseperator />}           />       }      return(        <view>           {centreslist}           <listseperator />        </view>     );    }; } 

so loads centrecomponent(s) based on response fetch (i.e number of results gets).

in test jest trying assert 2 components of type centrecomponent exist. test looks this:

jest.disableautomock(); import 'react-native'; import react 'react'; import {shallow, mount, render} 'enzyme'; import searchresultsscreen '../../src/searchresultsscreen/index'; import centrecomponent      '../../src/searchresultsscreen/centrecomponent'; import renderer 'react-test-renderer';  describe('searchresultsscreen', () => {   test.only('renders more 1 centrecomponent', () => {     jest.usefaketimers();     global.fetch = jest.fn().mockimplementation(() => {         let kc = [{           _centre_id: 1,           name: 'test',           address_1: 'abc',           address_2: 'def',           city: 'so',           postcode: 'tt',         }, {           _centre_id: 2,           name: 'testee',           address_1: 'abc',           address_2: 'def',           city: 'so',           postcode: 'tt',         }]         console.log('mock fetch called');          return new promise((resolve, reject) => {           process.nexttick(             () => resolve({ok: true, json: function(){return kc}})           );         });      });       const checkbox = mount(<searchresultsscreen origin_long='5' origin_lat='2' distance='5'/>);      jest.runallticks();      checkbox.update();      expect(checkbox.find(karcentrecomponent)).tohavelength(2);    }); }); 

when run test jest.js --env=jsdom

i see following console.log being printed in order:

console.log('before fetch called'); console.log('mock fetch called'); console.log('before state updated '+responsejson[0].name);  error @ line: console.log('error '+error); 

the error is:

  { invariant violation: element type invalid: expected string (for    built-in components) or class/function (for composite components)    got: undefined. forgot export component    file it's defined in. check render method of    `searchresultsscreen` 

so suspicion that, when componentdidupdate calling

  this.setstate({           centres: responsejson,          }); 

it throwing exception being caught "catch".