CODEWITHSUNDEEP
javascriptreactjsjestjsenzyme
hightides1973
hightides1973

Reputation: 527

setTimeout in enzyme/jest

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

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.

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

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

test

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

Upvotes: 0

Views: 719

Answers (1)

Alen Vlahovljak
Alen Vlahovljak

Reputation: 574

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. You can set timeout as much as you want.

Upvotes: 1

Related Questions