[pt-BR] Como Testar Consumo de API de uma Aplicação em React - #4
Tags: javascript, beginners, tutorial, react
Published: 2022-02-21 21:20:58


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](https://dev.to/dxwebster/pt-br-parte-2-hands-on-como-implementar-testes-unitarios-no-react-25jg) e [parte 3](https://dev.to/dxwebster/pt-br-parte-3-hands-on-como-testar-os-hooks-de-uma-aplicacao-em-react-54a9) 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 `useEffect`sem 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`.

```js
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>
  );
};
```

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:

```js
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();
    });
  });
});
```

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”](https://youtu.be/wTrjx54wDgM](https://youtu.be/wTrjx54wDgM)) do canal da Zappts, feito pelo [Cláudio Castro](https://www.linkedin.com/in/ccastrojr/).

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