Checking for a class in React testing library

Question

I have a class called button-group that is rendered like this:

<body>
        <div>
          <span
            class="button-group"
          />
        </div>
      </body>

Now, How do I check/query for the presence of the button-group class? I have written:

const { container } = render( <ButtonGroup /> );
expect( container.firstChild.toHaveClass( 'button-group' ) );

But this test is failing for some reason, thank you.

I think the write way is expect(container.firstChild).toHaveClass( 'button-group' ) — bcjohn
– bcjohn, Commented May 4, 2022 at 13:34
gets fixed by this same answer => stackoverflow.com/a/65948977/14409895 — Tomas Cabral Hunter
– Tomas Cabral Hunter, Commented Sep 8, 2022 at 14:57

poo · Accepted Answer · 2022-05-04 13:55:11Z

3

One of the proper ways for testing this would be as follows:

<div>
    <span data-testid="span-id"
      class="button-group"
    />
  </div>

And testcase as follows:

render( <ButtonGroup /> );
expect(screen.getByTestId('span-id')).toHaveClass('button-group') ;

We should not directly refer to the node for testing. Have a look at this doc as well https://github.com/testing-library/eslint-plugin-testing-library/blob/main/docs/rules/no-node-access.md

answered May 4, 2022 at 13:55

poo

1,2507 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

spraveenitpro Over a year ago

Thank you, I am trying like this: ```test( 'should have ButtonGroup class', () => { render( <ButtonGroup /> ); screen.debug(); expect( screen.getByTestId( 'button-group-id' ).toHaveClass( 'button-group' ) ); } ); But Getting that toHaveClass is not a function: Direct Link

poo Over a year ago

There is an issue with brackets. it should be expect(screen.getByTestId('button-group-id')).toHaveClass('button-group');

Collectives™ on Stack Overflow

Checking for a class in React testing library

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related