React Testing Library - Как вызвать функцию onError из Тег - PullRequest
Новая
       37

React Testing Library - Как вызвать функцию onError из Тег

1 голос
/ 24 января 2020

У меня есть следующий компонент. По сути, тег изображения HTML с крюком useState, который устанавливает резервное изображение при onError. (Когда изображение не существует локально): 

import React, { useState } from 'react';

export interface LensesImageProps {
  srcImage: string;
  classNames?: string;
  fallbackImage?: FallbackImages;
}

export enum FallbackImages {
  GENERAL_FALLBACK = 'src/assets/icons/general.svg',
  SPECIFIC_FALLBACK = 'src/assets//specific.svg'
}

const Image = ({
  srcImage,
  fallbackImage = FallbackImages .GENERAL_FALLBACK,
  classNames
}: ImageProps) => {
  const imgToSourceFrom = `srcImage`;
  const imgToFallbackTo = `fallbackImage`;

  const [imgUrl, setImgUrl] = useState<string>(imgToSourceFrom);

  return (
    <img
      src={imgUrl}
      className={classNames}
      onError={() => setImgUrl(imgToFallbackTo)}
    />
  );
};

export default Image;

Я довольно подробно протестировал Happy Path. Нет, я пытаюсь проверить Несчастный Путь. Это означает, что я должен вызвать функцию onError, чтобы установить состояние.

Я попытался смоделировать его с fireEvent и createEvent и отладить его, событие Fires, но не Кажется, я не могу изменить состояние так, как должно .. На самом деле меня смущает ..

Я хочу сделать это с react-testing-library, по причинам обучения, но также и потому, что это компонент функции, и Enzyme не может читать состояние из компонентов функции. Кто-нибудь знаком с react-testing-library или hooks-testing-library, чтобы помочь мне здесь? Спасибо !!

...