Вопрос о тестировании компонентов React с использованием CustomHooks

Question

Я только начинаю изучать React и Redux. У меня есть вопрос о том, как тестировать в Jest.

Я отделяю logi c компонента от компонента функции как 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 / modules / counter / operator.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: написать отдельный тест только для функции useCounter, которая реализована как CustomHooks, и тест для сам компонент Counter. (например, useCounter.test.ts / counter.test.tsx)

2: проверить только компоненты Counter, использующие useCounter (не пишите UnitTest для самого useCounter)

Answer 1

Я предпочту второй вариант, протестировать только поведение компонента Counter, используя react-testing-library. Использование хуков - это деталь реализации, а тестирование поведения компонента в тесте «интеграции» - это путь к go в этом случае. Тестирование таким образом также будет отражать то, как конечный пользователь будет использовать ваш компонент.

Однако это изменится, если вы создадите ловушку, которую собираетесь опубликовать sh для повторного использования другими разработчиками. , В этом случае хук будет частью вашего пакета API, поэтому его следует тестировать индивидуально.

Я также должен сказать, что это вопрос личных предпочтений, и есть люди, которые предпочитают все тестировать модулем.