Reactjs 使用react和contextapi编写测试

我正在试着写一个测试，但我没有得到预期的结果，有人能看出我做错了什么吗？我试图调用我的

addTodo

，但我得到的只是下面的错误消息，这对测试来说是全新的，所以我不确定这意味着什么

我的错误消息如下：

  ● <TodoForm /> #addTodo

    expect(jest.fn()).toBeCalledWith(...expected)

    Expected: {"payload": "a new todo", "type": "addTodo"}

    Number of calls: 0

      24 |   form.find("button").simulate("click");
      25 |
    > 26 |   expect(dispatch).toBeCalledWith({ type: "addTodo", payload: "a new todo" });
         |                    ^
      27 | });
      28 |

      at Object.<anonymous> (src/tests/TodoForm.test.js:26:20)

自动创建我的上下文数据

import React, { useReducer } from "react";

export default (reducer, actions, initialState) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};

import React，{useReducer}来自“React”；
导出默认值（减速器、动作、初始状态）=>{
const Context=React.createContext（）；
常量提供程序=（{children}）=>{
const[state，dispatch]=useReducer（reducer，initialState）；
const boundActions={}；
for（让输入操作）{
boundActions[key]=动作[key]（调度）；
}
返回(
{儿童}
);
};
返回{Context，Provider}；
};

import React, { useContext, useState } from "react";

import { Context } from "../context/TodoContext";
import "../css/TodoForm.css";

const TodoForm = ({ initialValues }) => {
  const { addTodo } = useContext(Context);

  const [title, setTitle] = useState("");
  const [error, setError] = useState("");

  function handleTodoAdd() {
    if (title === "") {
      setError(true);
    } else {
      setError(false);
    }
    setTitle("");
  }

  const onChange = e => {
    setTitle(e.target.value);
  };

  /*
  function handleSubmitForm(event) {
    if (event.keyCode === 13) handleTodoAdd();
  }
*/

  return (
    <div className="container">
      <div className="inputContainer">
        <div className="input-group">
          <input
            autoFocus={true}
            aria-label="Enter the title of your todo"
            placeholder="Enter new todo"
            value={title}
            onChange={onChange}
          />

          <div className="errorContainer">
            <span className="error">
              {error ? "Please enter a value" : null}
            </span>
          </div>
          <div className="input-group-append">
            <button
              aria-label="Add todo to your list"
              className="addButton"
              onClick={() => addTodo(title)}
            >
              Add
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};
TodoForm.defaultProps = {
  initialValues: {
    title: "adsda"
  }
};

export default TodoForm;

import React from "react";
import createDataContext from "./createDataContext";

export const TodoContext = React.createContext();

export default function todoReducer(state, action) {
  switch (action.type) {
    case "addTodo":
      return [
        ...state,
        { id: Math.floor(Math.random() * 999), title: action.payload }
      ];
    case "deleteTodo":
      return state.filter(todo => todo.id !== action.payload);
    case "editTodo":
      return state.map(todo => {
        return todo.id === action.payload.id ? action.payload : todo;
      });
    default:
      return state;
  }
}

const addTodo = dispatch => {
  return title => {
    dispatch({ type: "addTodo", payload: title });
  };
};

const deleteTodo = dispatch => {
  return id => {
    dispatch({ type: "deleteTodo", payload: id });
  };
};

const editTodo = dispatch => {
  return (id, title) => {
    dispatch({ type: "editTodo", payload: { id, title } });
  };
};

export const { Context, Provider } = createDataContext(
  todoReducer,
  { addTodo, deleteTodo, editTodo },
  []
);

import React, { useReducer } from "react";

export default (reducer, actions, initialState) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    const boundActions = {};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {children}
      </Context.Provider>
    );
  };

  return { Context, Provider };
};