关于使用CustomHooks测试React组件的问题

Question

我才刚刚开始学习React和Redux。有关于如何在Jest中进行测试的问题。

我将组件逻辑与功能组件分离为CustomHooks，并在与定义组件的文件不同的单独文件中实现它们。在CustomHooks中，它使用useState和useDispatch钩子。

・ src / components / counter.tsx

import React from 'react';
import { useCounter } from 'modules/counter/operators';

const Counter: React.FC = () => {
  const { count, total, handleIncrementClick, handleResetClick } = useCounter();

  return (
    <div>
      <p>total:{total}</p>
      <p>current:{count}</p>
      <button onClinc={handleIncrementClick}>Increment</button>
      <button onClinc={handleResetClick}>Reset</button>
    </div>
  );
};

・ src /模块/计数器/operators.ts

import { useState, useCallback, MouseEvent } from 'react';
import { useDispatch } from 'react-redux';
import { counterActions } from 'modules/counter/slicer';

const useCounter = (): [
  string,
  (e: MouseEvent) => void,
  (e: MouseEvent) => void,
] => {
  const {count, setCount} = useState(0);
  const dispatch = useDispatch();

  const handleIncrementClick= useCallback(
    (e: MouseEvent) => {
      setCcount(count + 1);
      dispatch(counterActions.increment({ add: 1 }));
    },
    [count, dispatch]
  );
  const handleResetClick= useCallback(
    (e: MouseEvent) => {
      setCcount(0);
    },
    [count]
  );

  return [count, handleIncrementClick, handleResetClick];
};

以这种方式实现时，以下哪个是更好的UnitTest？

1：仅针对实现为CustomHooks的useCounter函数编写单独的测试，并针对Counter组件本身编写测试。（例如useCounter.test.ts / counter.test.tsx）

2：仅测试使用Counter的useCounter组件（请勿为useCounter本身编写UnitTest）

Answer 1

我更喜欢选项二，使用Counter仅测试react-testing-library组件的行为。使用挂钩是实现的详细信息，在这种情况下，可以通过“集成”测试来测试组件的行为。测试这种方式还将反映最终用户将使用您的组件的方式。

但是，如果您要创建要发布的钩子，以供其他开发人员重用，则情况会发生变化。在这种情况下，挂钩将成为您的包API的一部分，因此应单独进行测试。

我还必须说，这是个人喜好问题，有些人倾向于对所有内容进行单元测试。