酶/笑话中的setTimeout [英] setTimeout in enzyme/jest

问题描述

我试图了解异步测试如何在酶中起作用.

I am trying to understand how asynchronous testing works in enzyme.

我的View.tsx组件在一定的超时后呈现.(在我的情况下，超时确保动画完全完成时).在我的测试中，我尝试挂载父组件，并尝试编写测试:子组件"ViewContent"是否为子组件"ViewContent"?被渲染.

my View.tsx component renders after certain timeout.(timeout ensures in my case when animation is fully finished). In my test i tried to mount the parent component and was trying to write a test: is child component "ViewContent" was rendered.

我不确定如何为我的组件编写setTimeout测试.View.tsx

I am not sure how to write test for setTimeout for my component. View.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>
  );
};

eventListener

eventListener

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);
  });
}

推荐答案

不要忘记配置笑话，因为默认超时为5秒( 5000毫秒).做下一件事:

Don't forget to configure jest since default timeout is 5 seconds (5000 milliseconds). Do the next thing:

// 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

P.S.您可以根据需要设置超时.

P.S. You can set timeout as much as you want.

这篇关于酶/笑话中的setTimeout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！