React Jest Testing : How to test image is left aligned according to input parameter

Question

I have to create react component having image and text box, so My task is to test

Image or Text box is Left or right aligned , as needed
Image or Text box is Top or bottom aligned, as needed

By passing input variant as textLeft or textRight

Example Component

Any Help?

Are you using react-testing-library or something else? – Richard Hpa Jul 24 '22 at 19:58 — Richard Hpa, Jul 24 '22 at 19:58
@RichardHpa react-testing-libray, – Thanos Jul 24 '22 at 20:15 — Thanos, Jul 24 '22 at 20:15

score 1 · Answer 1 · answered Jul 24 '22 at 20:43

If they both had the same aria-label or another selector you could use the getAllBy query which would give you an array of items in order they find them so then you could check the children by using within to query inside those.

Something like this would work.

const Component = () => {
  return (
    <>
      <div aria-label="card">
        <img alt="image example" />
      </div>
      <div aria-label="card">
        <h1>This is heading</h1>
      </div>
    </>
  )
}

import { render, screen, within } from '@testing-library/react'

test('React Testing Library works!', () => {
  render(<Component />)
  const cards = screen.getAllByLabelText('card')
  expect(cards).toHaveLength(2)
  expect(within(cards[0]).getByAltText('image example'))
  expect(within(cards[1]).queryByAltText('image example')).not.toBeInTheDocument()

  expect(within(cards[1]).getByText('This is heading'))
  expect(within(cards[0]).queryByText('This is heading')).not.toBeInTheDocument()
})

React Jest Testing : How to test image is left aligned according to input parameter

1 Answers1