如何在React中用setIntervale测试UseEffect？

Question

这是Original Issue。

我有一个通知组件，其中autohide是控制通知可见性的属性：

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

在我的Notification组件中：

const Notification = ({ type, data, style, action, darkmode, autohide, children }) => {
    
    const [visible, setVisible] = useState(true);

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

 return (visible && <Wrapper {...props}> { children }</Wrapper>);

}

我正在使用酶，我想测试一下useEffect：

it("should hide the Notification after 5 seconds", () => {
        const wrapper = shallow(<Notification {...props} autohide />)
        // How to say that the component will be hidden after 5 seconds based on its internal state?
    });

我试过了：

    it('should hide the Notification after 5 seconds', () => {
        expect(wrapper.isEmptyRender()).toBeTruthy();
    });

但它不会产生影响。

Answer 1

尝试设置测试的等待时间-

使用props

• 设置组件验证它的呈现时间在测试中等待5秒

• Call wrapper.update()

• Verify

2. 已到达该时间并停止呈现。

Answer 2

Jest有一些fake timers。在你的单元测试中等待5秒不是一个好主意，因为它们应该是快速的。

像这样的东西应该是有效的：

jest.useFakeTimers();

it("should hide the Notification after 5 seconds", () => {
    const wrapper = shallow(<Notification {...props} autohide />);
        
    jest.runAllTimers();

    expect(wrapper.isEmptyRender()).toBeTruthy();
});

这可能不会立即起作用(我不确定异步是如何处理的)，但引用的页面应该会给你一些想法。