How to test useEffect with setInterval in React ? #1

alamenai · 2020-09-19T22:48:05Z

The next release will contain a feature of autohiding.

To do this, I've added a prop called autohide:

<Notification {...notification} darkmode autohide >
         <Media src={MEDIA_PATH} link='https://www.github.com' />
     </Notification>

To control autohide, I've created a state in the Notification component :


import React from "react"
import PropTypes from "prop-types"
import { Wrapper } from "./Styled"
import Header from "./Header"
import Body from "./Body"
import Action from "./Action"
import Media from "./Media"
import WithProvider from "./withProvider"

const AVAILABLE_TYPES = [
    "info",
    "warning",
    "success",
    "error"];

const Notification = ({ type, data, style, action, darkmode, autohide, children }) => {

    const [visible, setVisible] = React.useState(true);

    React.useEffect(() => {
        if (autohide) {
            setInterval(() => setVisible(false), 5000);
        }
        return () => {
            clearInterval();
        }
    }, [autohide]);

    const defaultStyle = {
        color: "rgb(0,151,255)",
        rounded: false,
        animation: "left2right",
        duration: 2
    }

    const { title, subtitle, message } = data;
    const { animation, rounded, duration, color } = style || defaultStyle;
    const { name, event } = action;


    if (!AVAILABLE_TYPES.includes(type)) {
        throw new Error(type + ' is not included in notification types');
    }

    if (duration && !(typeof duration === "number") && !Number(duration)) {
        throw new Error("duration should be a number");
    }

    return (visible ? <Wrapper
        type={type}
        animation={animation}
        rounded={rounded}
        color={color}
        darkmode={darkmode}
        duration={duration}>
        <Header title={title} subtitle={subtitle} />
        <Body message={message} />
        {children}
        <Action name={name} onClick={event} />
    </Wrapper> : null)
};

Notification.propTypes = {
    type: PropTypes.string.isRequired,
    data: PropTypes.object.isRequired,
    style: PropTypes.object,
    action: PropTypes.object.isRequired,
    darkmode: PropTypes.bool
};

Notification.defaultProps = {
    type: "info"
};

export default WithProvider(Notification)
export { Notification, Media }

Until now everything is well but when it comes to unit test, I could not test the effect of useEffect in other words how to know that the component will be hidden after 5 seconds :

I tried this code but it does not work :


it('should hide the Notification after 5 seconds', () => {
        jest.advanceTimersByTime(10000);
        expect(setInterval).toHaveBeenCalledTimes(1);
        expect(wrapper.isEmptyRender()).toBe(true);
    });

The text was updated successfully, but these errors were encountered:

alamenai added the good first issue Good for newcomers label Sep 19, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to test useEffect with setInterval in React ? #1

How to test useEffect with setInterval in React ? #1

alamenai commented Sep 19, 2020

How to test useEffect with setInterval in React ? #1

How to test useEffect with setInterval in React ? #1

Comments

alamenai commented Sep 19, 2020