Издевательство над несколькими пользовательскими крючками react с помощью jest

#javascript #reactjs #testing #jestjs #react-hooks

#javascript #reactjs #тестирование #jestjs #реагирующие крючки

Вопрос:

У меня есть пользовательский перехват React, который выполняет асинхронный вызов api и возвращает ответ. Реализация выглядит следующим образом:

   const {
    response,
    call,
    loading,
  } = useAsyncRequest({
    args: [collection, uid, schema],
    callFn: apiGetDocument,
  });
  

Затем я могу легко издеваться над этим компонентом с помощью jest, как показано ниже:

 AsyncRequestManager
      .mockReturnValue(defaultAsyncHookReturnLoad)
  

Это работает, если я использую только один из этих крючков, но если я использовал несколько (т.Е. 1 Для загрузки и 1 для сохранения), тогда я должен издеваться над обоими ответами отдельно, как показано ниже:

 AsyncRequestManager
      .mockReturnValueOnce(defaultAsyncHookReturnLoad)
      .mockReturnValueOnce(defaultAsyncHookReturnSave);
  

Который работает для одного и того же рендеринга, но не для следующих повторных отправлений.

Можно ли указать, чтобы jest возвращал значение последовательно?

то есть что-то вроде приведенного ниже (которое не работает из-за переменных с ограниченной областью действия)

 let i = 0;
AsyncRequestManager.mockImplementation(() => {
    i  = 1;
    if (i % 3 === 0) return defaultAsyncHookReturnLoad;
    if (i % 3 === 1) return defaultAsyncHookReturnSave;
    if (i % 3 === 2) return defaultAsyncHookReturnDelete
    // i  = 1;
});
  

Редактировать: Благодаря комментарию Адама вышеупомянутое решение, похоже, работает. Ура!

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

1. Почему не mockImplementation работает? Что еще более важно, аргументы, с которыми вызывается реализация, доступны в качестве аргументов, mockImplementation и их можно использовать для определения возвращаемого значения, которое вы хотите использовать.

2. let i находится за пределами области макетной реализации, поэтому он не обновляется в рамках макетной реализации

3. Это потому, что i =1 никогда не выполняется, потому что оно выполняется после операторов return .

4. Сейчас чувствую себя довольно глупо, но это сделало свое дело, спасибо!

5. просто чтобы уточнить, написанное решение приводит к хрупким тестам — это зависит от деталей реализации — того факта, что вы используете 3 перехвата в таком порядке. Если вы измените реализацию, но не результат, тест завершится неудачно. Гораздо лучше использовать аргументы для mockImplementation, чтобы определить, какое значение возвращаемого значения использовать, а не порядок, в котором они вызываются.