Context API React: o que é, como funciona e como criar testes unitários

import React, { useState } from "react"; 
export const TodoContext = React.createContext(); 
export function TodoProvider(props) { 
  const [todos, setTodos] = useState([]); 
  function addTodo(todo) { 
    setTodos([...todos, todo]); 
  } 
  function deleteTodo(index) { 
    setTodos(todos.filter((todo, i) => i !== index)); 
  } 
  return ( 
<TodoContext.Provider 
   value={{ 
        todos, 
        addTodo, 
        deleteTodo, 
   }} 
> 
   {props.children} 
</TodoContext.Provider> 
  ); 
}

No exemplo anterior, criamos um Provider que armazena uma lista de tarefas (todos) e disponibiliza duas funções: uma para adicionar e outra para remover tarefas da lista. 

Agora que temos o nosso Provider, vamos criar os nossos testes unitários. Para isso, vamos usar o pacote @testing-library/react. 

O primeiro teste será para verificar se a função addTodo está adicionando corretamente uma tarefa à lista. Tipo assim: 

No exemplo acima, renderizamos o Provider e o Consumer em um wrapper e clicamos no botão "Remover". Em seguida, utilizamos a função de espera, "wait", da biblioteca de testes para garantir que o elemento com o texto "tarefa 1" tenha sido removido. 

O segundo teste será para verificar se a função deleteTodo está removendo corretamente uma tarefa da lista. Aqui está como podemos fazer isso: 

No exemplo acima, estamos renderizando o Provider e o Consumer dentro de um wrapper e, em seguida, clicando no botão "Remover". Depois, estamos usando a função "wait" do "react-testing-library" para garantir que o elemento com o texto "tarefa 1" não esteja sendo exibido antes de verificarmos se ele é nulo. 

Agora que já vimos como criar testes unitários para Context API React usando React Testing Library, vale reforçar os principais benefícios de aplicar testes unitários em sua aplicação React. 

Testes unitários nos ajudam a garantir que o código da nossa aplicação esteja funcionando corretamente, mesmo quando fazemos alterações futuras.

Isso nos permite ter mais confiança no código que estamos escrevendo e nos dá a segurança de saber que as alterações que estamos fazendo não estão quebrando o funcionamento de outras partes da aplicação. 

Além disso, escrever testes unitários contribui para um código mais limpo e fácil de manter, porque incentiva a divisão do código em partes menores e mais fáceis de testar. Isso evita a criação de funções muito longas e complexas. 

O pacote react-testing-library é uma ótima opção para fazer testes em aplicações React, pois ele nos permite testar o comportamento do usuário, como clicar em botões e preencher formulários, de maneira mais fácil e intuitiva.  

Além disso, ele nos ajuda a escrever testes mais robustos, pois não se prende a detalhes de implementação, o que nos permite alterar o código sem precisar alterar os testes. 

Se você deseja se aprofundar em Context API React, aprender mais sobre testes unitários React com React Testing Library, praticar contexto React ou resolver de vez o prop drilling React em seus projetos, confira as sugestões abaixo da Alura: 

• React: gerenciamento de estados globais com ContextAPI 
• React: testando os seus componentes "

Esperamos que este artigo tenha esclarecido como utilizar e testar a Context API em uma aplicação React. Lembre-se de sempre testar o código para garantir seu correto funcionamento e facilitar a manutenção futura. 

Até a próxima 🖖!