Блог

Главная - Вопросы по программированию - тестирование возвращаемого значения обратного вызова с помощью react-крючков-тестирования-библиотеки

тестирование возвращаемого значения обратного вызова с помощью react-крючков-тестирования-библиотеки

#reactjs #unit-testing #testing #jestjs #react-hooks-testing-library

Вопрос:

В этом примере у нас есть простой крючок, useLog который возвращает метод. Как мне проверить, что он возвращается с помощью библиотеки react-hooks-тестирования. Я пытаюсь понять, как написать ожидаемое.

Журнал использования крючков:

 import {  useCallback } from 'react'
export const useLog = () => {
  const log = useCallback(() => console.log("hello World"), [])
  return { log }
}

тест:

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

const log = jest.fn()

test('should return log metod', () => {
  const { result } = renderHook(() => useLog())

  expect(result.current.log).toHaveReturnedWith(log);
})

что я получаю:

 Matcher error: received value must be a mock function
Received has type:  function
Received has value: [Function anonymous]

Комментарии:

1. result.current.log это не фиктивная функция, log это так. Но log не имеет отношения к тестируемому коду, непонятно, почему это будет какой-то частью ожиданий. Мне неясно, для чего useLog это на самом деле , поэтому трудно сказать, как будет выглядеть хороший тест для этого.

2. useLog-это просто пример использования, я пытаюсь понять, как протестировать метод возврата с помощью крючка, который я тестирую, который использует useCallback. @jonrsharpe

3. result.current.log будет содержать функцию обратного вызова, которую вы определили внутри useLog крючка. Если вы хотите протестировать эту функцию, почему бы не вызвать ее и не утверждать, что она сделала то, что должна?

4. Вам всегда нужно начинать с того, что должна делать вещь, которую вы тестируете. В настоящее время тест называется should increment counter — какой счетчик? Как связано с этим ожидание? Тогда само ожидание состоит в том, что запоминаемый обратный вызов, который не является двойным тестом (и не должен быть, это часть того, что вы тестируете), вызывается и возвращается log (который не имеет никакого отношения к коду, который вы тестируете).

Ответ №1:

Вам просто нужна функция spyOn, но ваш обратный вызов «журнал» ничего не возвращает. Это более приемлемо:

 import { renderHook, act } from '@testing-library/react-hooks';
import { useLog } from "./useCounter";

test('should return log metod', () => {
  const { result } = renderHook(() => useLog());
  const spy = jest.spyOn(result.current, 'log');
  act(() => {
    result.current.log();
  });

  expect(spy).toHaveReturnedWith(undefined);
  expect(spy).toBeCalledTimes(1);
  expect(spy).toReturnTimes(1);
});

Метки: