Show error message in console if given invalid value as prop to render

Author: chromium-52

src/components/ui/Accordion/Accordion.tsx

@@ -4,7 +4,7 @@ import AccordionItem from './fragments/AccordionItem';
 import AccordionHeader from './fragments/AccordionHeader';
 import AccordionTrigger from './fragments/AccordionTrigger';
 import AccordionContent from './fragments/AccordionContent';
-import { isReactNode } from '~/core/types';
+import { validateReactNode } from '~/core/types';
 
 export type AccordionProps = {
     items: {title: string, content: React.ReactNode}[];
@@ -17,11 +17,11 @@ const Accordion = ({ items } : AccordionProps) => {
                 <AccordionItem value={index} key={index} >
                     <AccordionHeader>
                         <AccordionTrigger>
-                            {isReactNode(item.title) ? item.title : 'Accordion title must be a valid string'}
+                            {validateReactNode(item.title, 'title') && item.title}
                         </AccordionTrigger>
                     </AccordionHeader>
                     <AccordionContent>
-                        {isReactNode(item.content) ? item.content : 'Accordion content must be a valid React element'}
+                        {validateReactNode(item.content, 'content') && item.content}
                     </AccordionContent>
                 </AccordionItem>
             ))}

src/components/ui/Accordion/tests/Accordion.test.tsx

@@ -55,19 +55,25 @@ describe('Accordion', () => {
         expect(screen.getByText('is')).not.toHaveAttribute('hidden');
     });
 
-    test('renders component when header and content are invalid', () => {
-        // @ts-expect-error: title and content should be a string and ReactNode, respectively
-        const { rerender } = render(<Accordion items={[{ title: 28, content: { key: 'value' } }]} />);
-        expect(screen.getByText(28)).toBeInTheDocument();
-        expect(screen.getByText('Accordion content must be a valid React element')).toBeInTheDocument();
+    describe('props to render are invalid', () => {
+        beforeEach(() => {
+            console.error = jest.fn();
+        });
 
-        // @ts-expect-error: title and content should be a string and ReactNode, respectively
-        rerender(<Accordion items={[{ title: { hi: 'bye' }, content: () => {} }]} />);
-        expect(screen.getByText('Accordion title must be a valid string')).toBeInTheDocument();
-        expect(screen.getByText('Accordion content must be a valid React element')).toBeInTheDocument();
+        test('renders accordion when title and content are invalid', () => {
+            // @ts-expect-error: title and content should be a string and ReactNode, respectively
+            render(<Accordion items={[{ title: { hi: 'bye' }, content: () => {} }]} />);
+            expect(console.error).toHaveBeenCalledWith('title is not a valid React node');
+            expect(console.error).toHaveBeenCalledWith('content is not a valid React node');
+        });
 
-        // @ts-expect-error: item should contain title and content keys
-        rerender(<Accordion items={[{ extra: '' }]} />);
-        expect(screen.getByTestId('accordion-root')).toBeInTheDocument();
+        test('renders accordion when title and content are missing', () => {
+            // @ts-expect-error: item should contain title and content keys
+            render(<Accordion items={[{ extra: '' }]} />);
+            expect(screen.getByTestId('accordion-root')).toBeInTheDocument();
+            // nothing is printed to the console since a value is undefined if it's not given and undefined
+            // is a valid React node
+            expect(console.error).not.toHaveBeenCalled();
+        });
     });
 });

src/core/types.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ * Check that the given value is a valid React Node in a component before rendering it to avoid
+ * rendering invalid values and crashing the app
+ *
+ * @param value value to validate
+ * @param name user-friendly name of the value
+ * @returns value if it's a valid React Node and false otherwise
+ */
+export const validateReactNode = (value: any, name?: string): React.ReactNode => {
+    if (isReactNode(value)) {
+        return value;
+    }
+
+    console.error(`${name || value} is not a valid React node`);
+    return false;
+};
+
+/**
+ * Check if the given value is a valid React Node
+ */
+const isReactNode = (value: any): value is React.ReactNode => {
+    return (
+        typeof value === 'string' ||
+        typeof value === 'number' ||
+        typeof value === 'boolean' ||
+        value === null ||
+        value === undefined ||
+        React.isValidElement(value) ||
+        (Array.isArray(value) && value.every(isReactNode))
+    );
+};