React e Context API: testes de unidade

Salve, salve! Tudo bem com você?

Hoje estou aqui pra falar sobre a Context API e como podemos criar testes unitários, para garantir que tudo funcione corretamente em uma aplicação React. Para ilustrar, vamos usar como exemplo uma lista de tarefas (ToDo list).

Antes de começarmos, é importante lembrar que a Context API é uma opção mais avançada do que o padrão de passagem de props em React, então é recomendado só usá-la se você precisar compartilhar dados em uma escala mais ampla ou se passar props manualmente estiver ficando muito complexo. Normalmente precisamos pensar em soluções desse tipo quando enfrentamos o já conhecido e famoso prop drilling.

Primeiro, vamos criar o nosso Provider de contexto. O Provider irá fornecer os dados para os componentes que estiverem "subscritos" a ele. Alguma coisa nessa linha:

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 acima, criamos um Provider que armazena uma lista de tarefas (todos) e duas funções para adicionar e remover tarefas da lista.

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

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

import { render, fireEvent, wait } from "react-testing-library";
import { TodoProvider, TodoContext } from "./TodoProvider";

test("adiciona uma tarefa à lista", async () => {
  const { getByTestId, getByText } = render(
    <TodoProvider>
      <TodoContext.Consumer>
        {({ addTodo }) => (
          <button data-testid="add-button" onClick={() => addTodo("nova tarefa")}>
            Adicionar tarefa
          </button>
        )}
      </TodoContext.Consumer>
    </TodoProvider>
  );
  fireEvent.click(getByTestId("add-button"));
  await wait(() => expect(getByText("nova tarefa")).toBeInTheDocument());
});

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

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

import { render, fireEvent, wait } from "react-testing-library";
import { TodoProvider, TodoContext } from "./TodoProvider";

test("remove uma tarefa da lista", async () => {
  const { getByTestId, queryByText } = render(
    <TodoProvider>
      <TodoContext.Consumer>
        {({ todos, deleteTodo }) =>
          todos.map((todo, index) => (
            <div key={todo}>
              <span>{todo}</span>
              <button data-testid="delete-button" onClick={() => deleteTodo(index)}>
                Remover
              </button>
            </div>
          ))
        }
      </TodoContext.Consumer>
    </TodoProvider>
  );
  fireEvent.click(getByTestId("delete-button"));
  await wait(() => expect(queryByText("tarefa 1")).toBeNull());
});

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 a Context API, vamos falar sobre os benefícios de fazer testes unitários em uma aplicação.

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, testes unitários nos ajudam a escrever código mais limpo e mais fácil de manter. Isso porque, ao escrever testes, somos forçados a pensar em como dividir nosso código em partes menores e mais fáceis de testar, o que nos ajuda a evitar 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.

Quer saber mais sobre como a Context API funciona? Ou é no mundo dos testes que você quer mergulhar? Aqui na Alura temos algumas opções, dá uma olhada:

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

Espero que este post tenha ajudado a entender como usar e testar a Context API em uma aplicação React. Não esqueça de sempre testar o seu código para garantir que ele esteja funcionando corretamente e para torná-lo mais fácil de manter no futuro.

Até a próxima 🖖!