[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>
  );
};

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

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

Comments

[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.

[lucasfrutig0]

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

[Jonas Tolentino]

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

[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.