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 ?

Answer 1

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.

Answer 2

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');
  });
});