Domine o uso de act() para atualizações assíncronas em testes React

Explorando o act() em testes React

A função act() é uma ferramenta essencial quando se trata de testar componentes React que envolvem operações assíncronas. Ela garante que todas as atualizações de estado e mudanças na árvore de componentes sejam processadas antes que os testes sejam concluídos. Isso é especialmente importante para manter a integridade dos testes e evitar comportamentos inesperados.

O que é act()?

O act() é uma função que faz parte da biblioteca de testes do React. Ele permite que você agrupe chamadas de atualização de estado e garante que todas as atualizações necessárias sejam aplicadas antes de realizar uma asserção no teste.

Por exemplo, considere o seguinte trecho de código:

import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

test('deve atualizar o texto quando o botão é clicado', async () => {
    render(<MyComponent />);
    fireEvent.click(screen.getByText('Clique aqui'));
Await act(async () => {
        // espera pela atualização
    });
    expect(screen.getByText('Texto atualizado')).toBeInTheDocument();
});

Nesse exemplo, act() é utilizado para esperar até que todas as atualizações de estado ocorram após o clique no botão. Isso assegura que a asserção subsequente verifica o estado correto do componente.

Quando usar act()?

Você deve utilizar act() sempre que seu teste envolver atualizações assíncronas, como:

• Chamadas a APIs que alteram o estado do componente.
• Operações que envolvem timers ou delays, como setTimeout.
• Interações do usuário que provocam re-renderizações.

Erros comuns ao usar act()

Um erro comum que muitos desenvolvedores encontram é não usar act() quando necessário. Isso pode resultar em avisos no console durante os testes, indicando que algumas atualizações de estado não foram executadas corretamente. Para evitar isso, sempre que realizar uma atualização que possa ser assíncrona, encapsule-a dentro de um act().

Exemplo avançado com act()

Vamos considerar um cenário mais complexo, onde um componente faz uma chamada a uma API quando um botão é clicado:

import { render, screen, waitFor } from '@testing-library/react';
import MyAsyncComponent from './MyAsyncComponent';

test('deve exibir dados da API após clique', async () => {
    render(<MyAsyncComponent />);
    fireEvent.click(screen.getByText('Carregar dados'));
Await act(async () => {
        await waitFor(() => screen.getByText('Dados carregados'));
    });
    expect(screen.getByText('Dados carregados')).toBeInTheDocument();
});

Neste exemplo, o waitFor é utilizado junto com act() para garantir que a verificação aconteça somente após os dados da API serem carregados e o estado do componente atualizado.

Conclusão

O uso de act() é fundamental para a escrita de testes eficazes em React. Ao garantir que todas as atualizações sejam processadas antes de fazer asserções, você minimiza o risco de falhas e falsos positivos em seus testes. Lembre-se de sempre encapsular suas chamadas assíncronas dentro do act() para obter os melhores resultados.

A prática leva à perfeição. Quanto mais você se familiariza com o uso do act(), mais eficiente se tornará na criação de testes robustos para seus componentes React.

Por que o act() é fundamental para testes em React?

A função act() é uma das principais ferramentas para controlar o comportamento de componentes React em testes. Com a crescente complexidade das aplicações, especialmente aquelas que lidam com operações assíncronas, entender como utilizar o act() corretamente se torna crucial. Além de melhorar a confiabilidade dos testes, essa prática ajuda a manter a qualidade do código e a evitar problemas futuros. Este conceito é especialmente valioso para desenvolvedores que buscam criar aplicações escaláveis e de fácil manutenção, tornando-se um diferencial no mercado de trabalho.

Algumas aplicações:

• Testar componentes que fazem chamadas a APIs.
• Verificar interações do usuário em componentes.
• Garantir que atualizações de estado sejam refletidas corretamente.

Dicas para quem está começando

• Leia a documentação oficial do React sobre testes.
• Experimente diferentes cenários de testes usando act().
• Utilize ferramentas como React Testing Library para facilitar a escrita de testes.
• Pratique a escrita de testes em pequenos componentes antes de avançar para aplicações maiores.
• Participe de comunidades online para compartilhar experiências e aprendizados.

Contribuições de

Gabriel Nogueira

Desenvolvedor front-end especializado em React e design de interfaces responsivas.

Mais sobre o autor

Compartilhe este tutorial