Reactjs 如何编写钩子的测试？

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

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>
  );
}

---

你的测试应该是：

description（“useToggleState”，（）=>{
它（“初始切换为false”，（）=>{
const{result}=renderHook（（）=>UseToggleState（true））
行动（（）=>{
结果.当前[1]（）
})
expect（result.current[0]）.toBe（false）
})
它（“切换为真”，（）=>{
const{result}=renderHook（（）=>UseToggleState（））
行动（（）=>{
结果.当前[1]（）
})
expect（result.current[0]）.toBe（true）
})
})

您使用的是哪个版本的

react

和

react test render

？react是16.13.1，react test render是16.13.1@tmhao2005I为您删除了答案。顺便说一句，测试设置看起来也不正确。钩子的第一个测试参数应该是

true

如下：

renderHook（（）=>UseToggleState（true））

我仍然得到以下错误。。。expect（received.toBe（expected）//Object.is equality expected:true received:undefined 28 |}）29 |>30 | expect（result.current.toggle（））.toBe（true）|^31 |}）32 |}）断言这个

expect（result.current.toggle（）你在做什么（））托比（对）

？我想我还需要更改TypeError:result.current.toggle不是一个函数，因为它一直在说它不是一个函数。你是否正确地遵循了答案？你是否更改了钩子的返回值？是的，但是整个应用程序都会中断。Jus保持实现不变。我已经使用数组为你更新了测试取而代之的是对象

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()
    })
})