Test 예시 - React + Jest

해피데빙·2023년 2월 13일
0
import React from 'react';
import ReactDOM from 'react-dom';
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import Thumbnail from '../component/Thumbnail';
import { resq$ } from 'resq';

describe('썸네일이 표현되어야 합니다', () => {
  const container = document.createElement('div');

  afterEach(() => {
    ReactDOM.unmountComponentAtNode(container);
  });

  it('thumbnail 클래스를 가진 <img> 엘리먼트를 리턴해야 합니다', () => {
    render(<Thumbnail />, { container });
    //테스트하려는 컴포넌트를 가져와서 container에 렌더링?

    const element = container.querySelector('img.thumbnail');
    expect(element).toBeTruthy(); // img.thumbnail 이 존재해야 합니다
    expect(element.tagName).toBe('IMG'); // img.thumbnail 의 태그 이름은 img입니다
    expect(element.classList.contains('thumbnail')).toBeTruthy();
  });

  it('`source` 라는 이름의 props으로 이미지 파일 이름을 전달받아야 합니다', () => {
    render(<Thumbnail source='selfie.jpeg' />, { container });
    const props = resq$('Thumbnail', container).props;
    expect(Thumbnail.length).toBe(1);
    expect(props).toHaveProperty('source', 'selfie.jpeg');
  });

  it('<img> 엘리먼트는 props로 받은 source를 적용해 이미지를 표시해야 합니다', () => {
    render(<Thumbnail source='selfie.jpeg' />, { container });
    expect(container.querySelector('img.thumbnail')).toHaveAttribute('src', 'selfie.jpeg');
  });
});

jest 설치하다가 몇시간이 지나갔는데 공식 문서 보니까 다 해결되어서 너무나 화가 나지만 한편으로는 기분이 좋다
눈물..
https://v1.test-utils.vuejs.org/installation/#using-vue-test-utils-with-jest-recommended

profile
노션 : https://garrulous-gander-3f2.notion.site/c488d337791c4c4cb6d93cb9fcc26f17

0개의 댓글