Showing results for 
Show  only  | Search instead for 
Did you mean: 

React/Jest - Properly testing component including external component

Dynatrace Advocate
Dynatrace Advocate

Hi all,
I'm currently using the ExpandableSection in my app and I want to test with Jest the following behavior:

  • if section is expanded show ComponentA and not ComponentB
  • if section is closed show ComponentB and not ComponentA

I'm simulating an an check afterwards if the components are defined/throwing. Unfortunately, I'm failing to write the proper test for case 2.

My component looks like follows
import { ExpandableSection } from '@dynatrace/strato-components-labs';

export const MyComponent = () => {
  const [isClosed, setIsClosed] = useState<boolean>(false);

  const onChangeExpandable = () => {
    setIsClosed((prev) => !prev);

  return (
        onOpenChange={() => onChangeExpandable()}
        <AComponent data-testid='a-component'/>

      {/* Show component if expandable section is closed */}
      {isClosed ? <BComponent data-testid='b-component' /> : null}

 My test for case 2 looks as follows

it('Should show BComponent and should not show AComponent if expandable is closed', async () => {
  // given
  render(<MyComponent />);

  // when
  const expandable = await screen.findByTestId('expandable');'button') as Element);
  const bComponent = await screen.findByTestId('b-component');

  // then
  await expect(screen.findByTestId('a-component')).rejects.toThrow();

The test is failing because the promise is resolved, and not rejected. But why?

Some further general questions:

  • is it actually useful doing such a test where an external component (ExpandableSection) is involved?
  • does it make sense doing here an intergration test with TestCafe (as an external component is involved)?
  • should I rather check the state, i.e.
    • if isClosed is true the <BComponent /> should be defined
    • if isClosed is false the <AComponent /> should be shown


Dynatrace Participant
Dynatrace Participant


did you check if component A is still rendered even if they the section isn't expanded? If so, maybe 


 would be the better choice.

Since it is a component from the design system I would expect that you don't have to test it's functionality since it's already tested internally.

Dynatrace Advocate
Dynatrace Advocate

Thanks for your answer! The expect(...).not.toBeVisible() is the better choice!

Dynatrace Helper
Dynatrace Helper

Hi Melanie, it may be because the ExpandableSection only removes the component once the animation is finished. Using waitFor should work:


import { waitFor } from "@dynatrace/strato-components-preview/testing";

await waitFor(async () => {
  expect(await screen.findByTestId('a-component')).not.toBeVisible();


 You can read more about the waitFor options here.

Dynatrace Advocate
Dynatrace Advocate

Thank you! That did the trick :dancing_blob:

Featured Posts