Как убедиться, что страница завершила загрузку на сайте React

#javascript #reactjs #automated-tests

#javascript #reactjs #автоматизированные тесты

Вопрос:

Есть ли способ убедиться, что веб-страница, закодированная в React, завершила загрузку? Обычные приемы javascript, похоже, не работают для React, что означает, что вы не можете безопасно использовать эти:

document.readyState == ‘complete’ amp;amp; jQuery.active == 0

Мы работаем над автоматическими тестами, и из-за этого у нас нет доступа к коду на стороне клиента, Поэтому мы не можем или должны создавать обратные вызовы и т. Д., Чтобы получить нужную нам информацию. Самый простой способ — использовать режим сна потока, но это очень ненадежная, разочаровывающая и плохая практика. Есть ли другой способ, например, выполнение js-скрипта, который вернет такую информацию?

Ответ №1:

На всякий случай, если кому-то это нужно…

Приведенный ниже подход лучше всего подходит для решения вашей проблемы.

 function Component() {
    const [loaded, setStatus] = useState(false);

    document.onreadystatechange = () => {
        setStatus(document.readyState === "complete");
    }
    return {loaded ? <Loaded />: <Loading />};
}

Ответ №2:

Использование нового API useEffect в сочетании с useState может помочь вам достичь того, чего вы хотите,

Что-то вроде следующего:

Внутри вашего функционального компонента:

  function yourComponent() {
   const [isLoading, setLoader] = useState(true)
   useEffect(() => {
     // Here you can access your API to get the Network state instead on document ready
       setLoader(document.readyState == 'complete' amp;amp; jQuery.active == 0)
   }, [])

   return (
     <div>
       {isLoading amp;amp; <Loader />}
       {!isLoading amp;amp; <OtherComponent />}
     </div>
    )}

затем вы можете использовать состояние загрузки, чтобы отобразить загрузчик в вашей части JSX и скрыть его, если состояние чтения изменится