chore(project): switch to renderWithRouter

jwplayer · Jul 21, 2023 · 5bf7a14 · 5bf7a14
1 parent 051e7d2
commit 5bf7a14
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 65 deletions.
diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
@@ -1,49 +1,33 @@
 import * as React from 'react';
-import { fireEvent, render } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
+import { fireEvent } from '@testing-library/react';
 
 import Card from './Card';
 
 import type { PlaylistItem } from '#types/playlist';
+import { renderWithRouter } from '#test/testUtils';
 
 const item = { title: 'aa', duration: 120 } as PlaylistItem;
 const itemWithImage = { title: 'This is a movie', duration: 120, cardImage: 'http://movie.jpg' } as PlaylistItem;
 
 describe('<Card>', () => {
   it('renders card with video title', () => {
-    const { getByText } = render(
-      <BrowserRouter>
-        <Card item={item} onClick={() => ''} />
-      </BrowserRouter>,
-    );
+    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
     expect(getByText(/aa/i)).toBeTruthy();
   });
 
   it('renders tag with correct duration', () => {
-    const { getByText } = render(
-      <BrowserRouter>
-        <Card item={item} onClick={() => ''} />
-      </BrowserRouter>,
-    );
+    const { getByText } = renderWithRouter(<Card item={item} onClick={() => ''} />);
     expect(getByText(/2/i)).toBeTruthy();
   });
 
   it('renders the image with the image prop when valid', () => {
-    const { getByAltText } = render(
-      <BrowserRouter>
-        <Card item={itemWithImage} onClick={() => ''} />
-      </BrowserRouter>,
-    );
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
   });
 
   it('makes the image visible after load', () => {
-    const { getByAltText } = render(
-      <BrowserRouter>
-        <Card item={itemWithImage} onClick={() => ''} />
-      </BrowserRouter>,
-    );
+    const { getByAltText } = renderWithRouter(<Card item={itemWithImage} onClick={() => ''} />);
 
     expect(getByAltText('This is a movie')).toHaveAttribute('src', 'http://movie.jpg?width=320');
     expect(getByAltText('This is a movie')).toHaveStyle({ opacity: 0 });

diff --git a/src/components/CardGrid/CardGrid.test.tsx b/src/components/CardGrid/CardGrid.test.tsx
@@ -1,26 +1,23 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
 
 import CardGrid from './CardGrid';
 
 import { generatePlaylistPlaceholder } from '#src/utils/collection';
+import { renderWithRouter } from '#test/testUtils';
 
 describe('<CardGrid>', () => {
   it('renders and matches snapshot', () => {
     const placeholderData = generatePlaylistPlaceholder();
-    const { container } = render(
-      <BrowserRouter>
-        <CardGrid
-          playlist={placeholderData}
-          onCardHover={vi.fn()}
-          onCardClick={vi.fn()}
-          isLoading={false}
-          accessModel={'SVOD'}
-          isLoggedIn={true}
-          hasSubscription={true}
-        />
-      </BrowserRouter>,
+    const { container } = renderWithRouter(
+      <CardGrid
+        playlist={placeholderData}
+        onCardHover={vi.fn()}
+        onCardClick={vi.fn()}
+        isLoading={false}
+        accessModel={'SVOD'}
+        isLoggedIn={true}
+        hasSubscription={true}
+      />,
     );
 
     expect(container).toMatchSnapshot();

diff --git a/src/components/Shelf/Shelf.test.tsx b/src/components/Shelf/Shelf.test.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
 
 import Shelf from '#components/Shelf/Shelf';
+import { renderWithRouter } from '#test/testUtils';
 
 const playlist = {
   playlist: [
@@ -60,39 +59,35 @@ const playlist = {
 
 describe('Shelf Component tests', () => {
   test('Regular shelf', () => {
-    const { container } = render(
-      <BrowserRouter>
-        <Shelf
-          title="Test Shelf"
-          type={'playlist'}
-          accessModel={'AVOD'}
-          hasSubscription={true}
-          isLoggedIn={true}
-          playlist={playlist}
-          enableCardTitles
-          enableTitle
-        />
-      </BrowserRouter>,
+    const { container } = renderWithRouter(
+      <Shelf
+        title="Test Shelf"
+        type={'playlist'}
+        accessModel={'AVOD'}
+        hasSubscription={true}
+        isLoggedIn={true}
+        playlist={playlist}
+        enableCardTitles
+        enableTitle
+      />,
     );
 
     expect(container).toMatchSnapshot();
   });
 
   test('Featured shelf', () => {
-    const { container } = render(
-      <BrowserRouter>
-        <Shelf
-          title="Featured Shelf"
-          type={'playlist'}
-          accessModel={'AUTHVOD'}
-          hasSubscription={true}
-          isLoggedIn={true}
-          playlist={playlist}
-          featured
-          enableCardTitles
-          enableTitle
-        />
-      </BrowserRouter>,
+    const { container } = renderWithRouter(
+      <Shelf
+        title="Featured Shelf"
+        type={'playlist'}
+        accessModel={'AUTHVOD'}
+        hasSubscription={true}
+        isLoggedIn={true}
+        playlist={playlist}
+        featured
+        enableCardTitles
+        enableTitle
+      />,
     );
 
     expect(container).toMatchSnapshot();