ReactJs单元测试-.update无法在功能组件内部的输入标签上模拟onChange事件带有酶的JEST

编程问答 2022-06-07

问题描述

我正在尝试学习单元测试，并且在功能组件内部的输入表单上模拟onChange事件时遇到问题。

这是我当前的组件代码：

....import codes hidden...

  const TodoMenu = (props) => {
  const [newTodo,setNewTodo] = useState("");
  const [todoDetails,setTodoDetails] = useState({});
  const { todoList } = props;
  const { getAllTodos,addTodo } = props;

  useEffect(() => {
    getAllTodos();
  },[]);

  const handleChange = (e) => {
    setNewTodo(e.target.value);
  };


  const TodoListMarkup =
    todoList.length > 0 ? (
      todoList.map((todo,index) => (
        <Todo
          key={index}
          todoDetails={todo}
        />
      ))
    ) : (
      <em>You have no task todo.</em>
    );


  return (
    <div className="todo-menu">
      <div className="todo-menu__header">
        <h1 className="todo-menu__heading">Todo List</h1>

        <form className="todo-menu__todo-form" onSubmit={handleSubmit}>
          <TextField
            name="newTodo"
            className="todo-menu__todo-input"
            value={newTodo}
            placeholder="Add New Task here"
            onChange={handleChange}
          />
          <button className="todo-menu__submit-button">
            <CornerDownLeft />
          </button>
        </form>

      </div>

      <div className="todo-menu__items">{TodoListMarkup}</div>


    </div>
  );
};

const mapStatetoProps = (state) => {
  return { todoList: state.TodoList };
};

const mapActionsToProps = { getAllTodos,addTodo };

export default connect(mapStatetoProps,mapActionsToProps)(TodoMenu);

这是我的测试文件：

let wrappedComponent;

beforeEach(() => {
  wrappedComponent = mount(
    <Provider>
      <TodoMenu />
    </Provider>
  );
});

afterEach(() => {
  wrappedComponent.unmount();
});

describe("New Todo form behavior",() => {
  let todoFormInput;

  beforeEach(() => {
    todoFormInput = wrappedComponent.find(
      ".todo-menu__todo-form > .todo-menu__todo-input"
    );
  });

  it("handle input changes",() => {
    todoFormInput
      .simulate("change",{
        target: { value: "New Todo 123" },});

    // wrappedComponent.setProps({});

    expect(
      todoFormInput
        .prop("value")
    ).toBe("New Todo 123");
  });
});

预期的行为： todoFormInput的值为“ New Todo 123”

实际行为： todoFormInput的值为“”

我尝试使用.setProps（{}），因为根据enzyme update() documentation，setProps强制重新渲染组件。

在使用基于类的组件之前，我已经成功使用过.update（），但是在功能组件中无法成功实现。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

enzymejavascriptjestjsreactjsreactjsunit-testing