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

如何编写钩子测试？

1 个答案: