diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx index cc6da5d110..08aeb0f53b 100644 --- a/src/components/List/ListAccordion.tsx +++ b/src/components/List/ListAccordion.tsx @@ -203,7 +203,7 @@ const ListAccordion = ({ const expandedInternal = expandedProp !== undefined ? expandedProp : expanded; const groupContext = React.useContext(ListAccordionGroupContext); - if (groupContext !== null && !id) { + if (groupContext !== null && (id === undefined || id === null || id === '')) { throw new Error( 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.' ); diff --git a/src/components/__tests__/ListAccordion.test.tsx b/src/components/__tests__/ListAccordion.test.tsx index c9fe8d6d10..0c24538348 100644 --- a/src/components/__tests__/ListAccordion.test.tsx +++ b/src/components/__tests__/ListAccordion.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { StyleSheet } from 'react-native'; +import { StyleSheet, View } from 'react-native'; import { render } from '@testing-library/react-native'; import color from 'color'; @@ -7,6 +7,7 @@ import color from 'color'; import { getTheme } from '../../core/theming'; import { red500 } from '../../styles/themes/v2/colors'; import ListAccordion from '../List/ListAccordion'; +import ListAccordionGroup from '../List/ListAccordionGroup'; import ListIcon from '../List/ListIcon'; import ListItem from '../List/ListItem'; import { getAccordionColors } from '../List/utils'; @@ -84,6 +85,36 @@ it('renders list accordion with custom title and description styles', () => { expect(tree).toMatchSnapshot(); }); +describe('ListAccordion', () => { + it('should not throw an error when id={0}', () => { + const ListAccordionTest = () => ( + + + + + + ); + + expect(() => render()).not.toThrow( + 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.' + ); + }); + + it('should throw an error when id={""}', () => { + const ListAccordionTest = () => ( + + + + + + ); + + expect(() => render()).toThrow( + 'List.Accordion is used inside a List.AccordionGroup without specifying an id prop.' + ); + }); +}); + describe('getAccordionColors - title color', () => { it('should return theme color, for theme version 3', () => { expect(