diff --git a/www/__tests__/Carousel.test.tsx b/www/__tests__/Carousel.test.tsx
index 7b8601109..d523f3afc 100644
--- a/www/__tests__/Carousel.test.tsx
+++ b/www/__tests__/Carousel.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from '@testing-library/react-native';
+import { render, fireEvent } from '@testing-library/react-native';
import { View } from 'react-native';
import Carousel from '../js/components/Carousel';
@@ -23,4 +23,32 @@ describe('Carousel component', () => {
expect(renderedChild1).toBeTruthy();
expect(renderedChild2).toBeTruthy();
});
+
+ it('scrolls correctly to the next card', () => {
+ const { getByTestId } = render(
+
+ {child1}
+ {child2}
+ ,
+ );
+
+ const scrollView = getByTestId('carousel');
+ fireEvent.scroll(scrollView, {
+ // Scroll to the second card
+ nativeEvent: {
+ contentOffset: {
+ x: cardWidth + cardMargin,
+ },
+ contentSize: {
+ width: (cardWidth + cardMargin) * 2,
+ },
+ layoutMeasurement: {
+ width: cardWidth + cardMargin,
+ },
+ },
+ });
+
+ expect(scrollView.props.horizontal).toBe(true);
+ expect(scrollView.props.snapToInterval).toBe(cardWidth + cardMargin);
+ });
});
diff --git a/www/js/components/Carousel.tsx b/www/js/components/Carousel.tsx
index 8afe6624a..81740fc8b 100644
--- a/www/js/components/Carousel.tsx
+++ b/www/js/components/Carousel.tsx
@@ -10,6 +10,7 @@ const Carousel = ({ children, cardWidth, cardMargin }: Props) => {
const numCards = React.Children.count(children);
return (