Не проходит тест кастомного react хука

Рейтинг: 0Ответов: 1Опубликовано: 11.06.2023

Необходимо протестировать кастомный хук, но тест не проходит, так как, видимо,нет доступа к tasks. Как решить эту проблему, если в реальности в браузере всё работает?

import { useEffect, useState } from "react";
import { ITask } from "../types/task.interface";
    
const useTasks = () => {
  const [tasks, setTasks] = useState<ITask[]>([]);

  const addNewTask = (value: string) => {
    const newTask: ITask = {
      id: tasks[0] ? tasks[tasks.length - 1].id + 1 : 0,
      isDone: false,
      title: value,
    };
    setTasks([...tasks, newTask]);
  };

  useEffect(() => {
    const tasks = JSON.parse(localStorage.getItem("tasks") as string);
    setTasks(tasks);
  }, []);

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  return {
    addNewTask
  };
};

export default useTasks;

Тест:

import { act, renderHook } from "@testing-library/react";
import useTasks from "./useTasks";

    describe("useTasks", () => {
      test("should add a new task", () => {
        const { result } = renderHook(() => useTasks());
        act(() => {
          result.current.addNewTask("New Task");
        });
        expect(result.current.tasks.length).toBe(1);
        expect(result.current.tasks[0].title).toBe("New Task");
      });
    });

Сама ошибка: введите сюда описание изображения

Пробовал менять tasks[0] на tasks.length > 0, ошибка такая же. Также, если из хука возвращаю tasks, то все равно не работает.

Ответы

▲ 0

Решил.

  1. Добавил в return tasks

  2. Изменил код функции:

     const addNewTask = (value: string) => {
     const newTask: ITask = {
       id: tasks && tasks.length ? tasks[tasks.length - 1].id + 1 : 0,
       isDone: false,
       title: value,
     };
     setTasks((prevTasks) => [...(prevTasks || []), newTask]);
    

    };