Testing react components and getting elements by className

Question

Im wondering if putting new class name into html component only for readability and tests is ok. Let's say we have this situation:

class ComponentOne extends React.Component {

    render(){
        <div>
           <div>
              <div className="lower">
                 {sometext}
              </div>
            </div>
        </div>
    }

}

This classes are here only for better readability in browser and for better testing this component. Like this :

import { render } from '@testing-library/react'
it("Testing ComponentOne", ()=>{
   const { container } = render(<Component/>)
   const element = container.querySelector(".lower") // cleaner element searching
   // testing element's text here
})

Is it a bad idea to using "empty" class in React only for readability/debugging/testing ? What is the best way to find elements while testing ?

I try pretty hard not to do it. If there's no text content or something else I can easily match with an existing RTL matcher than I wonder if I'm really trying to test UI/UX or if I'm actually testing an implementation detail. — Nick
– Nick, Commented Jul 11, 2021 at 20:55
Ok, so if i have some nested html tags, without any pointers, and i want to test changing style on click of the most nested of it i should go for the css selector/ xpath or something else ? The point is that if something will change whole selector should be changed, but if i have some classes (etc) tests wont change if structure will change. — mhan
– mhan, Commented Jul 11, 2021 at 21:21

Bibhudatta Sahoo · Accepted Answer · 2022-07-22 06:51:20Z

3

If some one looking for a solution to select by Id or Class in React Testing Library with Screen.
Then check this

class ComponentOne extends React.Component {
    render(){
        <div data-testid='main-component'>
           <div>
              <div className="lower">
                 {sometext}
                 <span id='spanid'> sometext2</span>
                 <div className="lower2">
                    {sometext3}
                 </div>
              </div>
            </div>
        </div>
    }
}

Then we can achieve this:

  import { render } from '@testing-library/react'
        it("Testing ComponentOne", ()=>{
           render(<Component/>)
    // testing element's text here
           const element = screen.getByTestId('main-component').querySelector(".lower") //select lower div
           expect(element).toHaveTextContent('sometext') 
    //Testing with Id
           const spanElement = screen.getByTestId('main-component').querySelector("#spanid") //select lower div
           expect(spanElement).toHaveTextContent('sometext2') 
    //Testing with nested class 
           const nestedElement = screen.getByTestId('main-component').querySelector(".lower.lower2") //select lower2 div
           expect(nested).toHaveTextContent('sometext3') class 
        })

You can test any class or Id base test by add a data-testid to the parent div on component level or by adding the test id in each required tags.
Then getByTestId & querySelector
I hope it will help you.

answered Jul 22, 2022 at 6:51

Bibhudatta Sahoo

4,9142 gold badges31 silver badges53 bronze badges

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

1 Comment

Adrian Bartholomew Over a year ago

You assume that the developer has edit access to the tested component's structure.

jdouitsis · Accepted Answer · 2022-11-08 23:24:20Z

1

You can use document.querySelector(...) to query anything that has been mounted. See the example below.

import React from 'react';
import { render } from '@testing-library/react';

describe('Query by ID', () => {
  it('Using querySelector', async () => {
    render(
      <div className="componentClassName" id="componentId">
        component
      </div>
    );
    const component = document.querySelector('#componentId');

    expect(component).toHaveClass('componentClassName');
  });
});

answered Nov 8, 2022 at 23:24

jdouitsis

797 bronze badges

Collectives™ on Stack Overflow

Testing react components and getting elements by className

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related