test: fix test for components with svg files

Co-authored-by: Justice Otuya <[email protected]>

jest.config.js

@@ -22,6 +22,7 @@ const customJestConfig = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^~/(.*)$': '<rootDir>/public/$1',
+    '^.+\\.(svg)$': '<rootDir>/src/__mocks__/svg.tsx',
   },
 };
 

src/__mocks__/svg.tsx

@@ -0,0 +1,8 @@
+import React, { SVGProps } from 'react';
+
+const SvgrMock = React.forwardRef<SVGSVGElement, SVGProps<SVGSVGElement>>(
+  (props, ref) => <svg ref={ref} {...props} />
+);
+
+export const ReactComponent = SvgrMock;
+export default SvgrMock;

src/__tests__/pages/HomePage.test.tsx

@@ -0,0 +1,15 @@
+// !STARTERCONF You should delete this page
+
+import { render, screen } from '@testing-library/react';
+
+import HomePage from '@/app/page';
+
+describe('Homepage', () => {
+  it('renders the Components', () => {
+    render(<HomePage />);
+
+    const heading = screen.getByText(/A starter for Next.js/i);
+
+    expect(heading).toBeInTheDocument();
+  });
+});