UncontrolledCollapse unit test failure, works fine in browser

[akilman]

• components: UncontrolledCollapse
• reactstrap version #8.0.0
• import method (unsure)
• react version #16.8.6
• bootstrap version #8.0.0

What is happening?

Unit test case is failing in rendering a React Component whose child has an UncontrolledCollapse component. Complains of a bogus selector. Otherwise, works fine in the browser.

This is with a boilerplate create-react-app instance with only bootstrap and reactstrap installed.

What should be happening?

Would expect the component to render and the unit test not fail

Steps to reproduce issue

1. Clone https://github.com/akilman/reactstrap-collapse-bug
2. yarn test

Error message in console

    SyntaxError: '##toggler' is not a valid selector

      at emit (node_modules/nwsapi/src/nwsapi.js:563:17)
      at Object._querySelectorAll [as select] (node_modules/nwsapi/src/nwsapi.js:1492:9)
      at findDOMElements (node_modules/reactstrap/lib/utils.js:239:28)
      at UncontrolledCollapse.componentDidMount (node_modules/reactstrap/lib/UncontrolledCollapse.js:55:48)
      at commitLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:17334:22)
      at commitAllLifeCycles (node_modules/react-dom/cjs/react-dom.development.js:18736:7)
      at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:149:14)

Code

const Example = () => (
  <div>
    <Button color="primary" id="toggler" style={{ marginBottom: '1rem' }}>
      Toggle
    </Button>
    <UncontrolledCollapse toggler="#toggler">
      <Card>
        <CardBody>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis
          similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed
          dignissimos esse fuga! Minus, alias.
        </CardBody>
      </Card>
    </UncontrolledCollapse>
  </div>
);

[zamirkhan]

I'm getting this same error, but in the browser (Chrome) with v8.0.1.

edit: happens in 8.1.1 as well.

[justinasit]

Same issue here as well, any update on this please?

[TheSharpieOne]

For this happening during tests check out #738 (comment) and #773 (comment)

If it is happening in the browser then at the time the component check the DOM for your target, your target is not yet rendered to the DOM. This is still an issue, but checkout #773 for more details.

[justinasit]

Ahh thanks @TheSharpieOne, got it to work by following this comment.