Testing rxjs subscription in react using jest - reactjs

Question

I am trying to test the below code
Slider.tsx
import React, { useEffect, useState } from "react";
import { ISlide } from "./ISlide";
import styled, { css } from "styled-components";
import { BehaviorSubject, Observable, Subject, timer } from "rxjs";
import { repeatWhen, take, takeUntil, takeWhile, tap } from "rxjs/operators";
interface ISliderProps {
...
}
const SliderWrapper = styled.ul`
...
`;
const SliderItem = styled.li`
...
`;
export const Slider = (props: ISliderProps) => {
const {
slides,
activeSlide = 0,
onActiveItemChange,
itemsPerPage = 1,
delay = 5000,
interval = 5000,
loop = true
} = props;
const [currentActiveSlide, setCurrentActiveSlide] = useState(activeSlide);
const sliderCount = Math.ceil(slides.length / itemsPerPage);
const timerStart$: Observable<null> = new BehaviorSubject(null);
const timerStop$: Observable<null> = new Subject<null>();
const timer$ = timer(delay, interval).pipe(
takeWhile(() => loop),
takeUntil(timerStop$),
repeatWhen(() => timerStart$)
);
useEffect(() => {
const timerSubscription = timer$.subscribe({
next: (i) => {
const nextSlide = i >= sliderCount ? i % sliderCount : i;
onActiveItemChange(nextSlide);
setCurrentActiveSlide(nextSlide);
}
});
return () => timerSubscription.unsubscribe();
}, []);
const handleSliderItemClick = (i: number) => {
setCurrentActiveSlide(i);
timerStop$.next(null);
timer(delay).pipe(
take(1),
tap(timerStart$.next(null))
)
}
return (
<>
<SliderWrapper>
{currentActiveSlide}
{slides.map(({ id }, i) =>
<SliderItem
key={id}
aria-label={"scroll page number " + id}
onClick={() => handleSliderItemClick(i)}
active={i === currentActiveSlide}
/>)}
</SliderWrapper>
</>
);
};
Below is my test
import React from "react";
import { Slider } from "../../../components/slider/Slider";
import renderer, { act } from "react-test-renderer";
import { ISlide } from "../../../components/slider/ISlide";
it("renders without crashing", done => {
const slides: ISlide[] = [
{ id: 1 }, { id: 2 }, { id: 3 },
{ id: 4 }, { id: 5 }, { id: 6 },
{ id: 7 }, { id: 8 }
];
act(() => {
const component = renderer.create(<Slider itemsPerPage={3} slides={slides} activeSlide={0} />);
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
done();
});
});
I have called done but the test keeps returning a warning
Jest did not exit one second after the test run has completed.
As expected the problem is in the subscription
● Timeout
67 |
68 | useEffect(() => {
> 69 | const timerSubscription = timer$.subscribe({
| ^
70 | next: (i) => {
71 | const nextSlide = i >= sliderCount ? i % sliderCount : i;
72 | onActiveItemChange(nextSlide);
How do I unsubscribe from this subscription?