fix(deps): update dependency react-slick to ^0.30.2

package.json

@@ -175,7 +175,7 @@
     "react-datepicker": "^4.25.0",
     "react-popper": "^2.3.0",
     "react-select": "^5.8.0",
-    "react-slick": "^0.29.0",
+    "react-slick": "^0.30.2",
     "react-toastify": "^9.1.3",
     "ryze": "^0.1.2",
     "slick-carousel": "^1.8.1"

src/components/Carousel/Carousel.stories.tsx

@@ -34,7 +34,7 @@ export const Default: Story = {
     slidesToShow: 2,
     variableWidth: false,
   },
-  decorators: [(StoryIns) => <div style={{ display: 'block', width: '100%' }}>{StoryIns()}</div>],
+  decorators: [(StoryIns) => <div style={{ display: 'block', maxWidth: 680 }}>{StoryIns()}</div>],
 };
 
 export const usePreventSwipeClicks = {
@@ -61,5 +61,5 @@ export const usePreventSwipeClicks = {
     slidesToShow: 2,
     variableWidth: false,
   },
-  decorators: [(StoryIns) => <div style={{ display: 'block', width: '100%' }}>{StoryIns()}</div>],
+  decorators: [(StoryIns) => <div style={{ display: 'block', maxWidth: 680 }}>{StoryIns()}</div>],
 };

src/components/Carousel/index.spec.jsx

@@ -24,16 +24,13 @@ it('should render with defaults', () => {
 it('should render with slides', () => {
   render(
     <Carousel>
-      <img data-testid="carousel-image-wrapper" src="path/to/image-1.jpg" alt="1" />
-      <img data-testid="carousel-image-wrapper" src="path/to/image-2.jpg" alt="2" />
+      <img data-testid="carousel-image" src="path/to/image-1.jpg" alt="1" />
+      <img data-testid="carousel-image" src="path/to/image-2.jpg" alt="2" />
     </Carousel>
   );
-  screen.getAllByTestId('carousel-image-wrapper').forEach((each) => {
-    expect(each).toBeInTheDocument();
-  });
-  screen.getAllByTestId('carousel-image-wrapper').forEach((each, index) => {
-    expect(each).toHaveAttribute('src', `path/to/image-${index + 1}.jpg`);
-  });
+  const [a, b] = screen.getAllByTestId('carousel-image');
+  expect(a).toHaveAttribute('src', 'path/to/image-1.jpg');
+  expect(b).toHaveAttribute('src', 'path/to/image-2.jpg');
 });
 
 it('should be able to navigate to the next image', async () => {