Why You Should Not Use Classes in React Testing Library

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

// 🔴 Don't
describe('Selectors', () => {
    it('should query the element by its className', () => {
        const { container } = render(<Component />)
        const domElement = container.getElementsByClassName('container')[0]

        expect(domElement).toBeInTheDocument()
    })
})

// ✅ Do
describe('Selectors', () => {
    it('should query the element by its className', () => {
        render(<Component />)

        expect(screen.getByTestId('element')).toBeInTheDocument() // Using data-testid attribute
        expect(screen.getByText('content')).toBeInTheDocument() // Using text content
        expect(screen.getByRole('button')).toBeInTheDocument() // Using the node type

        // Use getAllBy for multiple elements
        expect(screen.getAllByTestId('element')).toHaveLength(3)
        expect(screen.getAllByText('content')).toHaveLength(3)
        expect(screen.getAllByRole('button')).toHaveLength(3) 
    })
})

describe('Selectors', () => {
    it('should query the element by its className', () => {
        const { container } = render(<Component />)
        // ❓ What is the purpose of this element? What are we querying exactly?
        const domElement = container.getElementsByClassName('md:max-w-screen-xl')[0]

        expect(domElement).toBeInTheDocument()
    })
})

describe('Selectors', () => {
    it('should query the element by its className', () => {
        render(<Component />)

        expect(screen.getByTestId('element')).toHaveClass('open')
        expect(screen.getByTestId('element')).not.toHaveClass('closed')
    })
})