diff --git a/web/src/routes/Event.jsx b/web/src/routes/Event.jsx
index b0a20fd97..f773657c4 100644
--- a/web/src/routes/Event.jsx
+++ b/web/src/routes/Event.jsx
@@ -20,8 +20,8 @@ export default function Event({ eventId, close, scrollIntoView }) {
useEffect(() => {
// Call Events.js scroll when this event has been mounted.
- () => scrollIntoView(eventId);
- }, []);
+ scrollIntoView(eventId);
+ }, [scrollIntoView]);
const handleClickDelete = () => {
setShowDialog(true);
diff --git a/web/src/routes/__tests__/Event.test.jsx b/web/src/routes/__tests__/Event.test.jsx
index deed924d7..76be6b647 100644
--- a/web/src/routes/__tests__/Event.test.jsx
+++ b/web/src/routes/__tests__/Event.test.jsx
@@ -16,12 +16,12 @@ describe('Event Route', () => {
test('shows an ActivityIndicator if not yet loaded', async () => {
useEventMock.mockReturnValueOnce(() => ({ status: 'loading' }));
- render();
+ render();
expect(screen.queryByLabelText('Loading…')).toBeInTheDocument();
});
test('shows cameras', async () => {
- render();
+ render();
expect(screen.queryByLabelText('Loading…')).not.toBeInTheDocument();
@@ -33,7 +33,7 @@ describe('Event Route', () => {
test('does not render a video if there is no clip', async () => {
useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false }, status: 'loaded' });
- render();
+ render();
expect(screen.queryByText('Clip')).not.toBeInTheDocument();
expect(screen.queryByLabelText('Video Player')).not.toBeInTheDocument();
@@ -43,7 +43,7 @@ describe('Event Route', () => {
test('shows the thumbnail if no snapshot available', async () => {
useEventMock.mockReturnValue({ data: { ...mockEvent, has_clip: false, has_snapshot: false }, status: 'loaded' });
- render();
+ render();
expect(screen.queryByText('Best Image')).not.toBeInTheDocument();
expect(screen.queryByText('Thumbnail')).toBeInTheDocument();
@@ -66,4 +66,5 @@ const mockEvent = {
top_score: 0.8203125,
zones: ['front_patio'],
thumbnail: '/9j/4aa...',
+ scrollIntoView: jest.fn(),
};