Как проверить изменение состояния после события загрузки элемента изображения?

#reactjs #react-testing-library

Вопрос:

У меня есть следующий код:

 return (
    <img
        ref={imgRef}
        src={url}
        alt={alt}
        onLoad={() => {
          if (imgRef.current?.naturalWidth) setIsImgLoaded(true);
        }}
        style={!isImgLoaded ? { display: 'none' } : {}}
    />

Поэтому, когда изображение завершает загрузку (проверив его naturalWidth ), я обновляю isImgLoaded true его и отображаю (в начале, как вы можете видеть, я display: none установил для изображения).

В моих тестах, всякий раз, когда я пытаюсь сделать:

 expect(screen.getByRole('img')).toExist()

Я получаю ошибку TestingLibraryElementError: Unable to find role="img" , даже если пытаюсь использовать waitFor или findByRole .

Что я могу сделать?

1. И вы проверили img , действительно ли визуализация на DOM вне среды модульного тестирования?

2. Да, я проверил, так оно и есть.

3. Можете ли вы использовать этот debug метод в модульном тесте и распечатать на консоли ? const { debug } = render(<Component />); console.log(debug()) Я подозреваю, что элемент визуализируется во время модульного тестирования. Это должно подтвердить эту часть.

4. Я не думаю debug() , что это работает внутри console.log() . Когда я помещаю screen.debug() внутрь свой тест, он показывает img элемент.

Ответ №1:

Вам необходимо явно вызвать onLoad событие изображения, чтобы вызвать его обратный вызов и сделать изображение видимым во время теста.

 test("image is visible after loading", () => {
    render(<TestComponent />)
    // Use `{ hidden: true }` to access the image while it's not visible
    const image = screen.getByRole('img', { hidden: true })
    fireEvent.load(image)
    // No longer requires `{ hidden: true }` as the image is now visible
    expect(screen.getByRole('img')).toBeInTheDocument()
});