Quando desenvolvemos aplicativos no Flutter, garantir que os widgets funcionem corretamente é essencial para uma boa experiência do usuário. Para isso, os testes de widget desempenham um papel fundamental. Neste post, vamos explorar um pouco como testar widgets no Flutter e especialmente o de renderizar imagens, pois foi com ele que tive maior dificuldade.

O que é um Teste de Widget?

Os testes de widget no Flutter verificam a interface do usuário de forma isolada, garantindo que os componentes se comportem corretamente sem a necessidade de rodar o app inteiro. Eles ficam no meio termo entre os testes unitários (que verificam partes isoladas do código) e os testes de integração (que testam o aplicativo como um todo).

Problema ao testar widgets de imagem como o Image.network.

Recentemente, estava desenvolvendo um novo aplicativo e queria atingir uma cobertura de testes bem alta, próxima de 90%. Então, decidi testar as páginas e os widgets do meu aplicativo, mas tive um problema com widgets de imagem, especialmente com o Image.network().

Um dos meus cards renderizava imagens vindas da minha API e, nos testes, tive o seguinte erro, como mostrado na imagem abaixo:

Se vc quiser simular esse mesmo problema de forma simplificada, execute esse teste na sua maquina: 👇🏻

import 'package:flutter_test/flutter_test.dart';
void main() {
  testWidgets('my image test', (WidgetTester tester) async {
    await tester.pumpWidget(
      MaterialApp(
        home: Image.network(
            'https://www.cdc.gov/healthy-pets/media/images/2024/04/Cat-on-couch.jpg'),
      ),
    );
  });
}

Se você executou o teste acima, ele vai dar o seguinte erro: 👇🏻

Por que isso acontece? 😕

Isso ocorre porque, por padrão, o ambiente de teste do Flutter retorna respostas HTTP com status 400 para todas as requisições de rede, incluindo aquelas feitas pelo Image.network().

Fazer solicitações HTTP reais em testes é problemático. Primeiro, torna a execução de testes mais lenta. Também torna os testes imprevisíveis e instáveis.

Como resolver isso? 🤔

Para resolver esse problema, você pode utilizar pacotes que simulam as respostas das requisições de rede durante os testes. Aqui está a opção que usei, se chama flutter_image_test_utils ele fornece uma maneira simples de simular respostas de imagens de rede em testes de widget.

Isso garantirá que as chamadas ao Image.network() sejam simuladas durante os testes, evitando erros relacionados a requisições de rede.

1. • Adicione o packagete ao seu pubspec.yaml:

        dev_dependencies:
          flutter_image_test_utils: ^1.0.0
     

     • No seu arquivo de teste, importe o pacote e utilize a função provideMockedNetworkImages e envolva seu codigo com ela, veja o exemplo abaixo:

        import 'package:flutter_test/flutter_test.dart';
        import 'package:flutter_image_test_utils/image_test/image_test.dart';
       
        void main() {
          testWidgets('my image test', (WidgetTester tester) async {
            provideMockedNetworkImages(() async {
              await tester.pumpWidget(
                MaterialApp(
                  home: Image.network(
                      'https://www.cdc.gov/healthy-pets/media/images/2024/04/Cat-on-couch.jpg'),
                ),
              );
            });
          });
        }
       

2. Isso permitirá que você teste widgets que carregam imagens da rede sem enfrentar erros de requisição. Executando o teste novamente podemos ver que ele passa com sucesso. 🟢 👇🏻

Ao utilizar essa abordagem, todas as solicitações HTTP GET dentro do provideMockedNetworkImages receberão uma resposta de sucesso simulada, e seus testes não travarão mais com erros 404.

Agora você poderá testar seus widgets que dependem de imagens da internet sem enfrentar erros de requisição, garantindo uma cobertura de testes mais robusta para o seu aplicativo Flutter. 🧘🏻

Conclusão

Os testes de widget no Flutter são essenciais para garantir a qualidade do seu aplicativo. Com uma boa estratégia de testes, você pode detectar problemas rapidamente e oferecer uma experiência de usuário mais confiável. Experimente escrever seus próprios testes e veja como eles podem melhorar seu fluxo de desenvolvimento!

Obrigado por ler até aqui. 😁

Espero que você tenha gostado! Compartilhe-o com seus amigos e colegas!

Juntos, vamos construir apps incríveis que transformam o mundo!

Se tiver alguma dúvida ou contribuição me manda uma DM ou deixe nos comentários!

Me siga para estar sempre por dentro dos próximos artigos sobre desenvolvimento móvel 📲 🚀

🌐 Minhas redes sociais 🌐

GitHub | LinkedIn | Instagram | X (Twitter) | Medium