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 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
.
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
Top comments (4)
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.
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.
Obrigado pelo conteúdo. Será de grande ajuda.
Muito legal a série, me ajudou e vai me ajudar muito