DB Header: if secondaryAction is used Components are rendered twice when using react testing library render #4284
Description
Which generators are impacted?
- All
- HTML
- React
- Angular
- Vue
- Web components
- Power Apps
Reproduction case
If secondaryAction is used components are getting rendered twice with react testing library.
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import {DBButton, DBHeader} from "@db-ux/react-core-components";
it("should render once", () => {
render(<DBHeader secondaryAction={<DBButton>hit me</DBButton>}/>)
screen.getByText("hit me")
// expect just one DB Button but there are two
})
The console output:
TestingLibraryElementError: Found multiple elements with the text: hit me
Here are the matching elements:
Ignored nodes: comments, script, style
<button
class="db-button"
type="button"
>
hit me
</button>
Ignored nodes: comments, script, style
<button
class="db-button"
type="button"
>
hit me
</button>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Expected Behaviour
The test should just render one Element like in the DOM Tree in the running application.
Or if used primaryAction.
Screenshots
No response
Browser version
Chrome
Add any other context about the problem here.
No response