DEV Community

Adriana Ferreira Lima Shikasho
Adriana Ferreira Lima Shikasho

Posted on • Updated on

[pt-BR] Como Testar Consumo de API de uma Aplicação em React - #4

Já testamos um componente Button, um componente Link que tem evento de usuário, um hook que armazena o estado dos produtos e permite adição de itens no carrinho. Ufa, já vimos bastante coisa por aqui, não é?

Agora, chegou a hora de testar se nossa aplicação faz a chamada à API da lista de produtos da loja e exibe o resultado na tela conforme o esperado.

Se você não viu ainda como testar componentes e como testar hooks, recomendo ler a parte 2 e parte 3 deste material antes de prosseguir.

O que será abordado:

  • Testando consumo de API
  • Conclusão

Testando consumo de API

Como sempre, vamos analisar o código do componente ProductsList. No useEffectsem dependência, vemos que ele já executa a chamada a API 1x ao carregamento do componente e em seguida, monta o componente listando os products que foi atualizado pela ação setProducts disponíbilizada pelo hook useCart.

import React, { useEffect, useState } from 'react';
import api from '../../../services/api';
import Product from '../../../models/Product';
import * as Molecules from '../../Molecules';
import { Container, Title, List } from './styles';

export default function ProductsList() {
  const [products, setProduts] = useState<Product[]>([]);

  useEffect(() => {
    const getProducts = async () => {
      const response = await api.get('/products');
      setProduts(response.data);
    };
    getProducts();
  }, []);

  return (
    <Container>
      <Title>Nossos Produtos</Title>
      <List>
        {products.map(item => (
          <Molecules.ProductItem key={item.id} product={item} />
        ))}
      </List>
    </Container>
  );
};
Enter fullscreen mode Exit fullscreen mode

Pensar em consumo de API e em lidar com dados pode assustar um pouco, mas lembra que eu falei que nos testes tudo é simulado ou "mockado"?

Pois é, aqui também "mockaremos" os resultado da chamada a API, ou seja, os dados serão apenas um objeto que nós mesmos montaremos em uma variável cartProductMock.

A para simular também uma chamada à API, utilizaremos uma feature de uma lib chamada axios-mock-adapter, da qual permite essa simulação de um request utilizando o axios. (Você deve instalá-la como dependência usando npm ou yarn, ok?)

Beleza, vamos ver como isso funciona:

import React from 'react';
import MockAdapter from 'axios-mock-adapter';
import { render, act, waitFor } from '@testing-library/react';
import api from '../../../services/api';

import ProductsList from '.';
import cartProductMock from '../../../mocks/cartProductMock';

const apiMock = new MockAdapter(api);

describe('ProductsList component tests', () => {
  test('renders without crashing with request', async () => {
    act(() => {
      apiMock.onGet('/products')
      .reply(200, [{ ...cartProductMock }]);
    });

    const { getByText } = render(<ProductsList />);

    await waitFor(() => {
      expect(getByText('Test')).toBeInTheDocument();
    });
  });
});
Enter fullscreen mode Exit fullscreen mode

Uau, a maioria dos métodos a gente já conhece!

Podemos ver que temos o act que simula uma ação, neste caso utilizando um método onGet do apiMock. Temos o getByText, que já vimos várias vezes e no fim qual o resultado esperado, que como a maioria das vezes é que ele esteja na tela sendo exibido corretamente.

Conclusão

Eu particularmente não acho testes algo muito fácil, pois pensando que são a garantia do funcionamento da aplicação que desenvolvemos, acaba sendo um processo que requer muita responsabildiade, principalmente para evitar falso positivos ou negativos.

Entretanto, saber que temos um recurso a mais que agrega confiabilidade ao nosso código e traz mais qualidade à aplicação é um tanto satisfatório, pois como devs sempre queremos buscamos nos aprimorar para cada vez fazer entregas melhores.

Estudar e me desenvolver em testes para front-end tem sido meu objetivo atual, e esse foi meu primeiro estudo de testes, da qual abriu muito a minha mente e tenho certeza que é o primeiro passo de uma longa jornada de aprendizado.

Obrigada por chegar até aqui, e caso esse conteúdo tenha sido relevante para você, não esqueça de deixar seu comentário ou compartilhar para que mais gente também possa aprender!


Referências:

Esse conteúdo foi baseado no vídeo “Treinamento: Como implementar testes unitários em React utilizando Jest” do canal da Zappts, feito pelo Cláudio Castro.

Confira o repositório com o projeto: https://github.com/ccastrojr/react_unit_test

Top comments (4)

Collapse
 
leandrosoares6 profile image
Leandro Neves

Adriana meus parabéns pelo riquíssimo conteúdo! Pra mim foi de grande ajuda, pois estou na jornada de aplicar testes com Vue.js e acho o conceito de testes particularmente em frontend escasso e até mais complexo do que em backend.

Collapse
 
eduardoopv profile image
Luiz Eduardo Prado Veltroni

Obrigado pelo conteúdo Adriana!!
Foi de grande ajuda, estou começando a estudar sobre testes agora, e isso me esclareceu bastante as minhas dúvidas!!
Valeuu.

Collapse
 
jonastolentino profile image
Jonas Tolentino

Obrigado pelo conteúdo. Será de grande ajuda.

Collapse
 
lucasfrutig0 profile image
lucasfrutig0

Muito legal a série, me ajudou e vai me ajudar muito