Как получить окончательный снимок для компонента реакции после получения данных?

Question

Я тестирую интерфейс реагирующего компонента.Внутри этого компонента отправляется запрос и извлекаются данные для визуализации интерфейса пользователя.Теперь снимок до получения данных запроса.Как получить снимок после запроса?

// component.js
class Text extends Component {

  componentDidMount() {   
    this.load()   
  }

  load = () => {
    const {id} = this.props
    fetch('/abc').then(data => {
      this.setState({data})
    })
  }

  render() {
    if(!this.state.data) return null
    const {data} = this.state

    return (
      <div>
       {data}
      </div>
    )
  }
}

//jest
describe('test', () => {
  beforeEach(() => {
    fetch.mockImplementation(()=> new Promise(resolve=>resolve(4)))
  });



  test('base render', async () => {
    const wrapper = await render(<Text/>)
    expect(toJson(wrapper)).toMatchSnapshot()
  })


})

//received snapshot
null

//expected snapshot
<div>
  4
</div>