酶/玩笑中的setTimeout

Question

我試圖了解異步測試在酶中的工作原理。

我的 View.tsx 組件在特定超時后呈現。（在我的情況下，超時確保 animation 完全完成）。 在我的測試中，我嘗試掛載父組件並嘗試編寫測試：是否渲染了子組件“ViewContent”。

我不確定如何為我的組件編寫 setTimeout 測試。 查看.tsx

const View = (props: Props) => {
  const [isAnimationFinished, doFinishAnimation] = React.useState(false);

  const onLoad = (ev: AnimationEvent) => {
    setTimeout(() => doFinishAnimation(true), 50);
  };
  useEventListener("animationend", onLoad);

  return (
    <ScrollArea
      className="anim__movein__line"
    >
      {isAnimationFinished && (
        <>
          <ViewContent  />
        </>
      )}
    </ScrollArea>
  );
};

事件監聽器

import { useRef, useEffect } from "react";

export function useEventListener(
  eventName: string,
  handler: (ev?: any) => void
) {
  const savedHandler = useRef(null);

  useEffect(
    () => {
      savedHandler.current = handler;
    },
    [handler]
  );

  useEffect(
    () => {
      const eventListener = event => savedHandler.current(event);

      document.addEventListener(eventName, eventListener);

      return () => {
        document.removeEventListener(eventName, eventListener);
      };
    },
    [eventName]
  );
}

測試

import * as React from "react";
import * as Enzyme from "enzyme";

function CodeWarpper() {

  let component = React.createElement(App);
  let wrapper = Enzyme.mount(component);
  let findView = wrapper.find(React.createElement(ViewContent));
  
  Given(/^View '(.+)' becomes available$/, function () {

        setTimeout(() => {
      console.log(findView.debug())
    }, 60);                        //here nothing is shown 
    return ( expect(findView).to.be.true);
  });
}

Answer 1

不要忘記配置 jest，因為默認超時是 5 秒（ 5000 milliseconds ）。 做下一件事：

// jest.config.js
module.exports = {
  // setupTestFrameworkScriptFile has been deprecated in
  // favor of setupFilesAfterEnv in jest 24
  setupFilesAfterEnv: ['./jest.setup.js']
}

// jest.setup.js
jest.setTimeout(60000) // 1 minute

PS您可以根據需要設置超時。