"Cannot read property 'childElementCount' of null" error generated by react-test-renderer

[rkoziel]

The error "TypeError: Cannot read property 'childElementCount' of null" is being thrown by react-test-renderer for components that we have implemented the Accordion on, and parent components. This looks like it may be related to how react-test-renderer is rendering the AccordionItemHeading. Are there any recommendations on how to get around this error so we can still use react-test-renderer for our testing?

Thanks,
Ray Koziel

[ryami333]

Gidday @rkoziel, thanks for taking the time to file an issue with us. We're not doing anything particularly magical under the hood, so I can't imagine why you might be experiencing this issue. I'll try and take a poke around - but would you please be able to send me a minimal reproducible failing case? Also could you please let me know which versions of react, react-test-renderer and react-accessible-accordion you're using? Thanks!

[rkoziel]

Hi Mitch, here are the versions of react and react-accessible-accordion that are used: react - 16.8.6 react-accessible-accordion - 3.0.0 We are not using react-testing-library. Instead, we are using other components for testing, including the Jest react-test-renderer v16.8.6. As noted in the original issue notification, it looks like it is the Jest react-test-renderer that is having issues with the Accordion. I'll see what I can put together for a failing case as soon as I am able, around the other work tasks I have at this time. Thanks, Ray Koziel

…

On Tue, Aug 20, 2019 at 8:43 AM Mitch Ryan ***@***.***> wrote: Gidday @rkoziel <https://github.com/rkoziel>, thanks for taking the time to file an issue with us. We're not doing anything particularly magical under the hood, so I can't imagine why you might be experiencing this issue. I'll try and take a poke around - but would you please be able to send me a minimal reproducible failing case? Also could you please let me know which versions of react, react-testing-library and react-accessible-accordion you're using? Thanks! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#233?email_source=notifications&email_token=ALZTEAIZJ7TFV776C47L2PLQFPRIHA5CNFSM4INC4FAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4WEXOI#issuecomment-522996665>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALZTEAPPTVRL5PGUJ2XQPT3QFPRIHANCNFSM4INC4FAA> .

[ryami333]

Cool thanks for that info @rkoziel. As for the reproducible case - just a copy+paste snippet of a failing test would be really useful, I need to see what kind of context we're dealing with here.

Cheers!

[tbogdziun]

I had the same problem. To fix it in library pls check ref value before check this childElementCount in AccordionItemHeading component.
For now @rkoziel i founded solution for fixing test use https://jestjs.io/docs/en/bypassing-module-mocks and bypass react-accessible-accordion in tests to make it pass it's only solution before this bug will be fixed.

in my case that was solution:

jest.mock('react-accessible-accordion')
import renderer from 'react-test-renderer'

import AccordionWrapper from '..'
const {
Accordion,
AccordionItem,
AccordionItemHeading,
AccordionItemPanel,
AccordionItemButton,
} = jest.requireActual('react-accessible-accordion')

and test pass.

[ryami333]

Closing pending more specific details

[Vanuan]

Struggling with this as well. It's a known issue when testing components with use refs (html nodes):
facebook/react#7740

The workaround is to provide a Node mock:

        act(() => {
          tree = create(element, {
            createNodeMock: (element) => {
              if (element.type === 'div') {
                // mock node interface
                return { 
                  querySelectorAll: () => [],
                  contains: () => {},
                  click: () => {},
                  getAttribute: (name) => {
                    if(name === 'data-accordion-component') {
                      return 'AccordionItemButton';
                    }
                  },
                  childElementCount: 1,
                  firstElementChild: { getAttribute: () => 'AccordionItemButton' }
                };
              }
              return null;
            }
          });
        });

[ivanji]

Getting exact same error when attempting to create a snapshot test of the wrapper component. The accordion implementation is similar to the ones taken from your examples - nothing fancy.

The test is the following:

  expect(tree).toMatchSnapshot()``` 

'Items' refers to a short array with same values to the ones used in prod. 

error: "Cannot read property 'childElementCount' of null"


More details from the console:

```The above error occurred in the <AccordionItemHeading> component:
          in AccordionItemHeading (created by Context.Consumer)
          in Consumer (created by AccordionItemHeading)
          in AccordionItemHeading (at CollapsibleHelp.js:16)
          in div (created by AccordionItem)
          in Consumer (created by Provider)
          in Provider (created by Context.Consumer)
          in Consumer (created by ProviderWrapper)
          in ProviderWrapper (created by AccordionItem)
          in AccordionItem (at CollapsibleHelp.js:15)
          in div (created by Context.Consumer)
          in Consumer (created by Accordion)
          in Provider (created by Accordion)
          in Accordion (at CollapsibleHelp.js:13)
          in CollapsibleHelp (at CollapsibleHelp.test.js:28)
      
      Consider adding an error boundary to your tree to customize error handling behavior.
      Visit https://fb.me/react-error-boundaries to learn more about error boundaries.````

Hope these extra details are useful. If you need further details do let me know.