Шутка: издевайтесь над _HOC_ или _curried_ функцией

Question

Учитывая следующую функцию:

. / Http. js

const http = {
  refetch() {
    return (component) => component;
  }
}

Я хотел бы смоделировать функцию в тесте следующим образом:

. / __ tests __ / someTest. js

import { refetch } from './http';

jest.mock('./http', () => {
  return {
    refetch: jest.fn();
  }
}

refetch.mockImplementation((component) => {
  // doing some stuff
})

Но я получаю сообщение об ошибке

TypeError: _http.refetch.mockImplementation is not a function

Как я могу издеваться над функция refetch в данном примере?

---

обновление:

Когда я слегка изменяю функцию макета на:

jest.mock(
  '../http',
  () => ({ refetch: jest.fn() }),
);

Я получаю другая ошибка:

TypeError: (0 , _http.refetch)(...) is not a function

Я предполагаю, что это что-то с синтаксисом, когда карри функция (или функция HO C) не отображается должным образом. Но я не знаю, как ее решить.

---

Часть реального кода, который я пытаюсь протестировать.

Примечание: пример немного небрежный. Работает в приложении. Данный пример дает представление о работе.

. / SettingsContainer

// ...some code

  return (
    <FormComponent
      settingsFetch={settingsFetch}
      settingsPutResponse={settingsPutResponse}
    />
  );
}

const ConnectedSettingsContainer = refetch(
  ({
    match: { params: { someId } },
  }) => ({
    settingsFetch: {
      url: 'https://some-url.com/api/v1/f',
    },
    settingsPut: (data) => ({
      settingsPutResponse: {
        url: 'https://some-url.com/api/v1/p',
      }
    }),
  }),
)(SettingsContainer);

export default ConnectedSettingsContainer;

Затем в моем компоненте я получаю settingsPutResponse через реквизиты, которые реагировать-рефетч делает.

Я хочу проверить, может ли пользователь повторно отправить форму после того, как сервер ответил один или два раза 500, пока не вернется 204.

. / FormComponent

// ...code
const FormComp = ({ settingsResponse }) => {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if (settingsResponse && settingsResponse.fulfilled) {
      setSuccess(true);
    }
  }, [settingsResponse]);

  if (success) {
    // state of the form wil be reset
  }

  return (
    <form>
      <label htmlFor"username">
      <input type="text" id="username" />
      <button type="submit">Save</button>
    </form>
  )
};

Answer 1

Первый вопрос, который нужно задать себе для насмешек: «Мне действительно нужно издеваться над этим?» Самым простым решением здесь является тестирование «компонента» напрямую, вместо того, чтобы пытаться подделать оболочку http HO C вокруг него.

Я обычно избегаю попытки юнит-тестирования вещей, связанных с вводом / выводом. Эти вещи лучше всего решать с помощью функциональных или интеграционных тестов. Вы можете выполнить sh, убедившись, что при одинаковых реквизитах компонент всегда выдает одинаковые выходные данные. Затем он становится тривиальным по отношению к компоненту модульного тестирования, не требующему подделок.

Затем используйте функциональные и / или интеграционные тесты, чтобы убедиться, что фактический http I / O происходит правильно

Для более прямого ответа вам вопрос, хотя, jest.fn не является компонентом, но React его ожидает. Если вы хотите, чтобы макет работал, вы должны дать ему реальный компонент.

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