Testes de hooks é algo que assusta muita gente, mas vamos tornar tudo mais simples a partir de agora!
Vamos continuar implementando testes na nossa aplicação de carrinho de ecommerce. Caso você não tenha visto o início dessa parte mais prática, confira na parte 2 deste material.
O que será abordado:
- Testando Hooks
- Simulação e mocks
- Testando ações
- Testando um Componente que utiliza um Hook
Testando Hooks
O hook deste carrinho possui um contexto que nos fornece as ações de listar produtos, adicionar e remover os itens do carrinho e calcular o valor total dos itens.
A ideia é criar pelo menos 1 teste para cada ação, e utilizar os estados fornecidos pelo contexto para adicionar os mocks. Vamos ver o código do contexto (Vou deixar comentado em código o que cada parte faz):
[...]
function CartProvider({ children }) {
// Estado que armazena os produtos
const [products, setProducts] = useState<CartItem[]>(() => {
// pega os items em local storage
const itemsStorage = localStorage.getItem('@UnitTest:cart');
// se tiver items, retorna o valor como estado inicial
if (itemsStorage) return JSON.parse(itemsStorage);
// Se não tiver, retorna e inicia vazio.
return [];
});
// Atualiza Local Storage com um novo array de itens
useEffect(() => {
localStorage.setItem('@UnitTest:cart',
JSON.stringify(products: CartItem[]));
}, [products]);
// Ação que adiciona um item no carrinho
const addToCart = useCallback(
// Verifica se esse produto já existe no carrinho
(item: Product) => {
const productReceived = products.find(
product => product.id === item.id
);
// Se sim, adiciona 1 na contagem do item existente
if (!!productReceived) {
productReceived.count += 1;
setProducts([...products]);
}
// Se não, inclui o item no array com 1 no contador.
else {
setProducts([...products, { ...item, count: 1 }]);
}
},
[products],
);
[...]
Simulações e mocks
Certo! Agora, vamos implementar o primeiro teste deste hook que será a funcionalidade de pegar os itens que estão salvos em Local Storage.
Lembrando que esses items são armazenados no estado products, então o que esperamos neste teste, é que o e estado products tenha um array com algum item adicionado.
Esse teste vai se chamar getItems from LocalStorage. O código abaixo descreve esse teste, e você pode perceber que ele segue o mesmo padrão de escrita de testes que já aprendemos.
import React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import { waitFor, act } from '@testing-library/react';
import { CartProvider, useCart } from '.';
describe('Cart hook tests', () => {
test('get items from localStorage', async () => {
// 1. renderizar o hook
const { result } = renderHook(() => useCart(), {
wrapper: CartProvider
});
// 2. fazer uma query ou mock
const itemAddedToCart = {
id: 1,
createdAt: 'some_value',
name: 'Product Test',
price: 90,
image: 'image_path',
stock: 9,
};
// 3. executar alguma ação
jest.spyOn(Storage.prototype,'getItem')
.mockImplementation(key => {
switch (key) {
case '@ReactUnitTest:cart':
return JSON.stringify([itemAddedToCart]);
default:
return null;
}
});
// 4. descrever o resultado esperado
await waitFor(() => {
expect(result.current.products[0].name)
.toEqual('Product Test');
});
});
});
renderHook: como hook não é um componente, utilizamos esse método para renderizar o Hook e conseguir pegar o resultado dele. Neste caso, importamos o useCart e o envolvemos pelo seu provider o CartProvider.
result: pega o resultado de alguma ação ou estado que veio do contexto. No caso, pegar o estado products.
jest.spyOn: faz a simulação de alguma funcionalidade, neste caso simulamos o Local Storage.
mockImplementation: implementa um mock na simulação, neste caso, implementamos o mock de item na simulação de LocalStorage
waitFor: espera por um resultado.
expect: descreve o resultado esperado, aqui nós esperamos que o resultado, ou seja, que o array products tenha um item com o nome igual ao que passamos no mock.
Testando ações
Nosso próximo teste do hook será sobre adicionar items no carrinho. Queremos garantir que a function addToCart está funcionando corretamente.
O início será bem parecido com o teste anterior, da qual vamos renderizar o hook e criar um mock do item. O resultado esperado também será o mesmo, o que vai mudar aqui vai ser justamente o fato de que queremos testar uma açao do hook. Vamos ver como fica:
test('get items from localStorage', async () => {
// 1. renderizar o hook
const { result } = renderHook(() => useCart(), {
wrapper: CartProvider
});
// 2. fazer uma query ou mock
const itemAddedToCart = {
id: 1,
createdAt: 'some_value',
name: 'Product Test',
price: 90,
image: 'image_path',
stock: 9,
};
// 3. executar alguma ação
act(() => {
result.current.addToCart(itemAddedToCart);
});
// 4. descrever o resultado esperado
await waitFor(() => {
expect(result.current.products[0].name)
.toEqual('Product Test');
});
});
act: faz com que a renderização seja o mais próximo possível do que acontece no Browser. Neste caso, chamamos no método act a ação que queremos testar e passamos pra ela o mock como parâmetro.
expect: se tudo ocorrer bem, o resultado também será um array products com 1 item adicionado.
O hook ainda tem duas ações para ser testadas: removeToCart e getTotalPrice. Entretanto, fica como desafio, pois da pra fazer baseado naquilo que já vimos aqui.
Testando um Componente que utiliza um Hook
Ok, testamos duas funcionalidades do hook useCart e agora vamos testar um componente que utiliza esse hook, o próprio carrinho de compras. Como sempre, vamos olhar o código do componente:
import React from 'react';
import { ReactComponent as CartIcon } from '../../../assets/cart.svg';
import { useCart } from '../../../hooks/Cart';
import { Container } from './styles';
export default function Cart() {
const { products } = useCart();
return (
<Container to="/cart" data-testid="cart_link_component">
<CartIcon />
{products.length > 0 && (
<div>
<span>{products.length}</span>
</div>
)}
</Container>
);
};
Você se lembra qual o primeiro teste que costumamos escrever quando testamos um componente? Isso mesmo, testamos se ele está sendo exibido corretamente na tela.
Entretanto, como esse componente utiliza o hook useCart, não podemos simplesmente testar como já fizemos nos anteriores. Aqui nós precisaremos mockar o hook, já que o componente depende dele.
Vamos utilizar o mesmo método que usamos para simular o LocalStorage, o jest.spyOn. E para mockar também o retorno do hook, vamos passar um objeto pelo método mockReturnValue com o estado products e as ações que o hook disponibiliza.
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render } from '@testing-library/react';
import * as hookCart from '../../../hooks/Cart';
describe('Cart component tests', () => {
test('renders without crashing', () => {
jest.spyOn(hookCart, 'useCart').mockReturnValue({
products: [],
addToCart: jest.fn(),
removeToCart: jest.fn(),
getTotalPrice: 0,
});
const { getByTestId } = render(<Cart />, {
wrapper: BrowserRouter
});
expect(getByTestId('cart_link_component')).toBeInTheDocument();
});
}
import *: vamos importar tudo que vem do hook para simular
jest.spyOn: passando o que foi importado, vamos simular o hook useCart e mockar no mockReturnValue seus valores.
expect: utilizamos o mesmo método anterior de getByTestId e esperamos que o componente esteja na tela.
👉 Veja como testar consumo de API na parte 4
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 (0)