React自定义Hook测试：renderHook返回result.current为undefined问题

我编写了如下自定义Hook代码：

import { useState } from "react";

export const useCounter = (initialValue = 10) => {
  const [counter, setCounter] = useState(initialValue);

  const increaseCounter = (value = 1) => {
    setCounter(counter + value);
  };

  const resetCounter = () => {
    setCounter(initialValue);
  };

  const decreaseCounter = (value = 1) => {
    if (counter - value > 0) {
      setCounter(counter - value);
    }
  };

  console.log(counter);

  return {
    counter,
    increaseCounter,
    resetCounter,
    decreaseCounter,
  };
};

测试代码如下：

import { renderHook } from "@testing-library/react";
import { useCounter } from "../../src/hooks";

describe("Testing useCounter", () => {
  test("Debe retornar los valores por defecto", () => {
    const { result } = renderHook(() => {
      useCounter(2);
    });
    console.log(result.current);
  });
});

测试中result.current返回undefined，而非自定义Hook返回的各项属性，但Hook内部的console.log能输出预期值，请问问题出在哪里？

问题原因与解决方法 #

问题出在测试代码的renderHook回调函数里：你调用了useCounter(2)，但没有把这个调用的返回值return出去。renderHook需要通过回调的返回值来捕获Hook的输出，所以当前回调默认返回undefined，导致result.current就是undefined。

修正后的测试代码如下：

import { renderHook } from "@testing-library/react";
import { useCounter } from "../../src/hooks";

describe("Testing useCounter", () => {
  test("Debe retornar los valores por defecto", () => {
    const { result } = renderHook(() => {
      // 关键：返回useCounter的调用结果
      return useCounter(2);
    });
    console.log(result.current); // 现在就能拿到Hook返回的对象了
  });
});

或者更简洁的写法：

const { result } = renderHook(() => useCounter(2));

这样renderHook就能正确捕获到useCounter返回的对象，result.current就会是预期的包含counter和各个方法的对象。

内容的提问来源于stack exchange，提问作者manou