Как вы тестируете хуки без триггерного события, такого как щелчок - PullRequest
Новая
       23

Как вы тестируете хуки без триггерного события, такого как щелчок

0 голосов
/ 11 марта 2020

Кажется, много о том, как запустить тест для ловушек, если есть какой-то тип onClick, onChange, et c et c, но что если вы передаете эту функцию вашему компоненту обработки событий как я ниже? 

const Content: FC<Props> = ({ activeTab }) => {
  const [count, setCount] = useState<number>(0);

  function handleDateUpdate(dates: object) {
    const totalCount = new GetTotal(dates, activeTab);
    setCount(totalCount.totalAttendances());
  }

  useEffect(() => {
    if (activeTab === 'Year') {
      handleDateUpdate(new Date());
    }
  });

  return (
    <Container>
        {activeTab === 'Month' && (
          <Datepicker handleDateUpdate={handleDateUpdate} />
        )}
      <TotalAttendences count={count} />
    </Container>
  );
}

Я хотел бы написать тест, который проверяет оператор if в useEffect, а также handleDateUpdate, чтобы убедиться, что он делает то, к чему я намереваюсь.

1 Ответ

0 голосов
/ 11 марта 2020

Если вы хотите проверить, был ли вызван handleDateUpdate, я рекомендую извлечь его в вспомогательный файл, а затем экспортировать с export function. Затем вы импортируете весь вспомогательный файл в файл, в котором вы определяете компонент, выполнив следующее: import * as dateHelpers from '../path/to/file';

, чтобы при вызове функции в компоненте вы делали это как dateHelpers.handleDateUpdate. Это обеспечит правильное внедрение зависимости, так что вы сможете шпионить за экземпляром функции handleDateUpdate, которую вы вызываете в своем компоненте, чтобы убедиться, что она вызывается правильно (или нет).

Поскольку activeTab является опорой <Content />, я бы протестировал useEffect, выполнив следующее: 

import { shallow } from enzyme;
// I'm using enzyme here, but you could use whatever React testing library you choose
import * as dateHelpers from '../path/to/file/'

describe('<Content />', () => {
  let dateUpdateSpy;
  beforeEach(() => {
    dateUpdateSpy = jest.spyOn(dateHelpers, 'handleDateUpdate'); 
  })

  afterEach(() => {
    jest.clearAllMocks()
  })

  it('should invoke handleDateUpdate() when the activeTab prop equals "Year"'), () 
  => {
    shallow(<Content activeTab="Year" />);

    expect(dateUpdateSpy).toHaveBeenCalledWith(new Date());
  }


  it('should not invoke handleDateUpdate() when the activeTab prop does not equal 
  "Year"'), () => {
    shallow(<Content activeTab="Month" />);

    expect(dateUpdateSpy).not.toHaveBeenCalled();
  }
}

Последнее, вы должны добавить activeTab в качестве зависимость от useEffect, поскольку вы хотите запускать эту функцию обратного вызова только в случае изменения activeTab. Он будет работать при монтировании, но если по какой-либо причине, кроме изменения activeTab, будет выполнено повторное рендеринг, вы без необходимости повторно запустите useEffect. Так что я бы изменил это на: 

useEffect(() => {
  if (activeTab === 'Year') {
    dateHelpers.handleDateUpdate(new Date());
  }
}, [activeTab]);
``
...