useEffect работает до того, как компонент смонтирован в тесте jest - PullRequest
Новая
       53

useEffect работает до того, как компонент смонтирован в тесте jest

0 голосов
/ 01 июня 2019

useEffect запускается до монтирования компонента, кажется, когда я делаю document.getElementsByClassName для элемента в рендере, он не определен.Это не условно предоставлено или что-нибудь.

Я использую последнюю шутку с энзимом, настроенным с адаптером-16.Кто-нибудь знает, что происходит?

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


const IndustriesGraphic = () => {
  const canvas = useRef(null);

  useEffect(() => {
    const { clientWidth, clientHeight } = document.getElementsByClassName('industries-graphic__canvas-container')[0];

    canvas.current.style.width = `${clientWidth}px`;
    canvas.current.style.height = `${clientHeight}px`;

    const scale = clientWidth < clientHeight ? clientWidth : clientHeight;
    createGraphic(scale);

    const resizeGraphic = () => {
      const canvasContainer = document.getElementsByClassName('industries-graphic__canvas-container')[0];

      if (!canvasContainer) {
        return;
      }

      const { clientWidth: newWidth, clientHeight: newHeight } = canvasContainer;
      canvas.current.style.width = `${newWidth}px`;
      canvas.current.style.height = `${newHeight}px`;
      const newScale = newWidth < newHeight ? newWidth : newHeight;
      createGraphic(newScale);
    };

    window.addEventListener('resize', resizeGraphic);

    return window.removeEventListener.bind(null, 'resize', resizeGraphic);
  }, []);

  return (
    <div className="industries-graphic">
      <h1 className="industries-graphic__header">{industriesConfig.header}</h1>
      <div className="industries-graphic__canvas-container">
        <canvas ref={canvas} id={CANVAS_ID} />
      </div>
      <div className="industries-graphic__tablet-graphic">
        <span className="industries-graphic__tablet-icon">
          <img src={cryptoIcon} alt="crypto" />
        </span>
        <span className="industries-graphic__tablet-icon">
          <img src={securityIcon} alt="crypto" />
        </span>
        <span className="industries-graphic__tablet-icon">
          <img src={financialIcon} alt="crypto" />
        </span>
        <span className="industries-graphic__tablet-icon">
          <img src={entertainmentIcon} alt="crypto" />
        </span>
        <span className="industries-graphic__tablet-icon">
          <img src={socialIcon} alt="crypto" />
        </span>
        <span className="industries-graphic__tablet-icon">
          <img src={medicalIcon} alt="crypto" />
        </span>
      </div>
      <div className="industries-graphic__scroll-text">SCROLL TO CONTINUE</div>
    </div>
  );
};

Я ожидаю, что useEffect будет запущено после рендеринга, но компонент еще не смонтированпо какой-то причине

...