Checking a variable twice with jest in React

Question

I had two React components whose parent is same.

First component has a button and second component is just to show some text in it.

When the button in first component is clicked these things happen:

1. The text in second component is set to "Loading"
2. A request is fired in first component.
3. After that the second component displays the response from the request.

Now this is the problem. I want to check the text after the request gets response. This is what I tried:

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Left from '../Boxes/Left.js';

configure({adapter: new Adapter()});

function upd(data) {
    expect(data).toBe("some json response");
}

it('When button is clicked I get a response', async () => {
    const wrapper = shallow(<Left cb={upd}/>);
    const button = wrapper.find('#button_id');
    await button.simulate('click');
});

These are the component files.

Parent -> App.js

import React, {Component} from 'react';
import './style.css';
import Left from './Boxes/Left.js';
import Right from './Boxes/Right.js';

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

        this.state = {
            data: ""
        };

        this.upd = this.upd.bind(this);


    }

    upd(data) {
        this.setState({"data": data});
    }


    render() {
        return <div>
            <div className="topClass">
                <Left cb={this.upd}/>
            </div>
            <div className="bottomClass">
                <Right data={this.state.data}/>
            </div>
        </div>;
    }
}

export default App;

First component -> Left.js

import React, {Component} from 'react';

class Left extends Component {

    constructor() {
        super();

        this.bid = "button_id";

        this.get_content = () => {
            this.props.cb("Loading");

            fetch("https://hplussport.com/api/products/order/price/sort/asc/qty/1")
                .then(data => data.json())
                .then(data => {
                    this.props.cb(JSON.stringify(data[0]));
                    console.log(data);
                });


        }
    }

    render() {
        return <div>
            <button id={this.bid} onClick={this.get_content}>Fetch</button>
        </div>
    }
}

export default Left;

Second component -> Right.js

import React, {Component} from 'react';
import {render} from 'react-dom';

class Right extends Component{

    constructor() {
        super();
    }

    componentDidUpdate() {
        console.log(this.props);
    }

    render() {
        return <div>
            {this.props.data}
        </div>
    }

}

export default Right;

The problem I am facing is that jest is not checking the data when the callback function is called for the second time. It is only checking data when the function is called for the first time.

Thanks in advance :)