[MAINTAINER] What is the recommended React Testing Library way to test this?

[estevanmaito]

The reports of my death were greatly exaggerated

TL;DR What is the recommended React Testing Library way to test this?

I successfully upgraded Tailwind (to v3) and React (to v18), but there's a problem: contrary to this library, Enzyme is dead and a move to React Testing Library is unavoidable. That's not a bad thing, RTL is better, but this project was setup using a different philosophy.

Testing like this is discouraged using RTL:

  it('should render with large styles', () => {
    const expected = 'w-10 h-10'
    const wrapper = mount(<Avatar src="test" size="large" />)

    expect(wrapper.find(Avatar).getDOMNode().getAttribute('class')).toContain(expected)
  })

A WIP branch is available here if you want to try something, as I had to create my own version of jest-svg-transformer: master...wip-upgrade

There, you'll find that Avatar was already converted to RTL, while Alert is broken and Backdrop is still WIP.

[yurisldk]

I rewrote the tests for the component and also added a test for "Ref". For all other components, I would use this testing way. @estevanmaito Is there any further development of the project planned? I would rewrite all the tests for RTL compatibility.

import React, { createRef } from 'react'
import { render, screen, within } from '@testing-library/react'
import Avatar from '../Avatar'

const avatar = () => screen.getByTestId('avatar')
const img = () => within(avatar()).getByRole('img')

describe('Avatar', () => {
  it('should render without crashing', () => {
    render(<Avatar src="#" />)

    expect(avatar()).toBeInTheDocument()
  })

  describe('Root', () => {
    it('should render with base styles', () => {
      const expectedClasses = 'relative rounded-full inline-block'
      render(<Avatar src="#" />)

      expect(avatar()).toHaveClass(expectedClasses)
    })

    describe('prop: ref', () => {
      it('should be able to access the <Avatar />', () => {
        const avatarRef = createRef<HTMLDivElement>()
        render(<Avatar ref={avatarRef} src="#" />)
        expect(avatar()).toEqual(avatarRef.current)
      })
    })

    describe('prop: size', () => {
      it('should render with large styles', () => {
        const expectedClasses = 'w-10 h-10'
        render(<Avatar src="#" size="large" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })

      it('should render with regular styles', () => {
        const expectedClasses = 'w-8 h-8'
        render(<Avatar src="#" size="regular" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })

      it('should render with small styles', () => {
        const expectedClasses = 'w-6 h-6'
        render(<Avatar src="#" size="small" />)

        expect(avatar()).toHaveClass(expectedClasses)
      })
    })
  })

  describe('Image', () => {
    it('should contain an image with the correct src', () => {
      const expectedSrc = '#'
      render(<Avatar src="#" />)

      expect(img()).toHaveAttribute('src', expectedSrc)
    })

    it('should contain an image with alt text', () => {
      const expectedAltText = 'Lorem'
      render(<Avatar src="#" alt="Lorem" />)

      expect(img()).toHaveAccessibleName(expectedAltText)
    })
  })
})