Jest와 반응하여 이미지 테스트

최근에 React 구성 요소에 이미지가 표시되는지 테스트하는 방법에 대한 질문을 받았습니다. 이 짧은 글은 Jest와 React Testing Library를 약간 사용한 솔루션을 설명합니다.


이 문서는 https://robertmarshall.dev/blog/test-images-in-react-with-jest/에 처음 게시되었으며 최신 정보입니다.


이미지를 사용하여 테스트할 수 있는 두 가지 사항이 있습니다. 이미지src가 올바르게 채워졌고 이미지alt 태그가 올바르게 채워졌습니다.

예

전달된 인수에 따라 이미지를 렌더링하는 작은 구성 요소가 있습니다.

// This is the component we will test.
export const ImageComponent = ({ size }) => (
  <img
    src={`https://www.example.com/image-${size}.png`}
    alt={`The image alt tag for the ${size} image`}
  />
);

// This is where it is rendered in the app.
export default () => <ImageComponent size="big" />;

Jest로 React에서 이미지를 테스트하는 방법

테스트는 인수가 변경될 때 구성 요소 내에서 렌더링되는 이미지가 올바른지 확인할 수 있어야 합니다. React와 함께 Jest를 사용하면 올바른 alt 및 src 값을 확인할 수 있습니다.

Jest 테스트는 다음과 같습니다.

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

describe('The image component', () => {
  test('alt contains correct value', () => {
    render(<ImageComponent size="large"/>)
    const testImage = document.querySelector("img") as HTMLImageElement;
    expect(testImage.alt).toContain("The image alt tag for the large image");
  })

  test('src contains correct value', () => {
    render(<ImageComponent size="large"/>)
    const testImage = document.querySelector("img") as HTMLImageElement;
    expect(testImage.alt).toContain("https://www.example.com/image-large.png");
  })
});

더 많은 React 및 Jest 힌트와 팁을 보려면 React Category 및 Jest Testing Category 을 살펴보십시오!

이 정보가 도움이 되었길 바라며 질문이 있는 경우 다음 주소로 저에게 연락할 수 있습니다.