如何为钩子编写测试？

Question

我正在对组件进行单元测试，并尝试对钩子进行测试，但我似乎无法让它工作。这是我的钩子。我需要改变什么或做什么来修复这个测试？

import { useState } from 'react';

function UseToggleState (initialValue = false) {
  const [state, setState] = useState(initialValue);
  const toggle = () => setState(!state);

  return [state, toggle];
};

export default UseToggleState

这是我正在使用的组件。

export function Todo({ id, task, completed }) {
  const classes = useStyles();
  const dispatch = useContext(DispatchContext);
  const [isEditing, toggle] = useToggleState(false);

  if (isEditing) {
    return (
      <li
        className={classes.Todo}
        style={{ overflowY: "hidden" }}
        onClick={() => toggle()}
      >
        <EditForm id={id} task={task} toggleEditForm={toggle} />
      </li>
    );
  }

  return (
    <li
      className={classes.Todo}
      onClick={() => dispatch({ type: TOGGLE_TODO, id })}
    >
      <span
        style={{
          textDecoration: completed ? "line-through" : "",
          color: completed ? "#A9ABAE" : "#34495e",
        }}
      >
        {task}
      </span>
      <div className={classes.icons}>
        <FontAwesomeIcon
          icon={faPen}
          size="1x"
          onClick={(e) => {
            e.stopPropagation();
            toggle();
          }}
        />{" "}
        <FontAwesomeIcon
          icon={faTrash}
          size="1x"
          color={"#c0392b"}
          onClick={(e) => {
            e.stopPropagation();
            dispatch({ type: REMOVE_TODO, id });
          }}
        />
      </div>
    </li>
  );
}

而测试文件如下。它一直说切换不是一个功能，我不太清楚它为什么这样做。我需要做些不同的改变才能让它发挥作用吗？

describe("useToggleState", () => {
    it("Initial toggle is true", () => {
        const { result } = renderHook(() => UseToggleState(true))

        act(() => {
            result.current.toggle
        })

        expect(result.current.state).toBeTruthy()
    })

    it("Toggle is false", () => {
        const { result } = renderHook(() => UseToggleState(false))

        act(() => {
            result.current.toggle
        })

        expect(result.current.state).toBeFalsy()
    })
})

Answer 1

你的测试应该是：

describe("useToggleState", () => {
  it("Initial toggle is false", () => {
    const { result } = renderHook(() => UseToggleState(true))

    act(() => {
      result.current[1]()
    })

    expect(result.current[0]).toBe(false)
  })

  it("Toggle is true", () => {
    const { result } = renderHook(() => UseToggleState())

    act(() => {
      result.current[1]()
    })

    expect(result.current[0]).toBe(true)
  })
})