没有自定义钩子的模拟测试

我已经创建了一个基本的todolist组件，并正在为其编写一些测试，但我想知道如何模拟本地存储正在使用我当前拥有的代码收集数据的测试，或者是否需要创建一个自定义钩子来模拟。理想情况下，我不想这样做，但感觉这将是使用渲染挂钩的唯一方法。

This is my current code for todolist:
import { useEffect, useState } from 'react';
import { Container, TextInput, Button, List } from '@mantine/core';
import { Tasks } from '../types';
const TodoList = () => {
  const [task, setTask] = useState('');
  const [todoList, setTodoList] = useState<Tasks[]>([]);
  const handleChange = (event: any): void => {
    setTask(event.target.value);
  };
  const handleDelete = (taskToDelete: any) => {
    const deleted = todoList.filter((t) => t.taskName !== taskToDelete);
    setTodoList(deleted);
    localStorage.setItem('localTasks', JSON.stringify(deleted));
  };
  useEffect(() => {
    if (localStorage.getItem('localTasks')) {
      const storedList = JSON.parse(localStorage.getItem('localTasks') || '{}');
      setTodoList(storedList);
    }
  }, []);
  const addTask = () => {
    const newTask = {
      taskName: task,
    };
    setTodoList([...todoList, newTask]);
    localStorage.setItem('localTasks', JSON.stringify([...todoList, newTask]));
    setTask('');
  };
  return (
    <Container>
      <TextInput
        type="text"
        name="task"
        placeholder="enter a task"
        onChange={handleChange}
        value={task}
      />
      <Button onClick={addTask} data-testid="add">
        Add Task
      </Button>
      {todoList.map((todo, key) => (
        <Container key={key}>
          <List
            data-testid="todos"
            icon={
              <Button
                onClick={() => {
                  handleDelete(todo.taskName);
                }}
              >
                X
              </Button>
            }
          >
            <List.Item>{todo.taskName}</List.Item>
          </List>
        </Container>
      ))}
    </Container>
  );
};
export default TodoList;

更新代码以将日期id添加到待办事项：文章源自玩技e族-https://www.playezu.com/179068.html

import { Button, Container, List, TextInput } from '@mantine/core';
import type { ChangeEvent } from 'react';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
const TodoList = () => {
  const isMounted = useRef(false);
  const [task, setTask] = useState('');
  const [todoList, setTodoList] = useState<Array<{ taskName: string; id: number }>>([]);
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setTask(event.target.value);
  };
  const handleDelete = () => {
    setTodoList((prevTodoList) => prevTodoList.filter((todo, index) => index !== todo.id));
  };
  const addTask = () => {
    setTodoList((prevTodoList) =>
      prevTodoList.concat({
        taskName: task,
        id: new Date().getTime(),
      }),
    );
    setTask('');
  };
  useLayoutEffect(() => {
    const localTasks = JSON.parse(localStorage.getItem('localTasks') || '[]');
    if (localTasks.length > 0) setTodoList(localTasks);
  }, []);
  useEffect(() => {
    if (isMounted.current) {
      localStorage.setItem('localTasks', JSON.stringify(todoList));
    } else {
      isMounted.current = true;
    }
  }, [todoList]);
  return (
    <Container aria-label="container">
      <TextInput
        type="text"
        name="task"
        placeholder="enter a task"
        onChange={handleChange}
        value={task}
      />
      <Button type="button" onClick={addTask} data-testid="add-todo" name="add-button">
        Add Task
      </Button>
      {todoList.map((todo, key) => (
        <Container key={key}>
          <List
            data-testid={`todo-${key}`}
            icon={
              <Button
                data-testid={`delete-todo-${todo.id}`}
                type="button"
                aria-label="delete-button"
                onClick={() => {
                  handleDelete(todo.id);
                }}
              >
                X
              </Button>
            }
          >
            <List.Item>{todo.taskName}</List.Item>
          </List>
        </Container>
      ))}
    </Container>
  );
};
export default TodoList;