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

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

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> 
  ); 
}

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()); 
});

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()); 
});

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

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

Vinicios Neves

Explore por tópico

Vinicios Neves

Inscreva-se em nossa Newsletter

Explore por tópico

Leia também