don't mock around

dog-picture.tsx

interface State {
  dogImageUrl: string; 
}
  
export class DogPicture extends React.PureComponent<{}, State> {
  componentDidMount() {
    const dogService = new DogService();
    dogService.getRandomImageUrl()
      .then(dogImageUrl => this.setState({ dogImageUrl }))
  }

  render() {
    if (!this.state?.dogImageUrl) {
      return null;
    }

    return (
      <img src={this.state.dogImageUrl} alt='Dog' data-testid="dog-image" />
    )
  }
}

dogs-service.ts

import axios from 'axios';

export interface IDogService {
    getRandomImageUrl(): Promise<string>;
}

export class DogService implements IDogService {
    async getRandomImageUrl() {
        const response = await axios.get('https://dog.ceo/api/breeds/image/random');
        return response.data.message as string;
    }
}