jsdom과 jest-dom 그리고 testing-library

jsdom과 jest-dom 그리고 testing-library 차이

jsdom

js에서 DOM을 사용가능하게 하는 것
vite에서 설정하려면 test의 environment를 설정할 것

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    globals: true,
    setupFiles: "./setupTests.ts",
  },
});

testing library
핵심 라이브러리인 DOM 테스팅 라이브러리는 웹 페이지를 테스트하기 위한 경량 솔루션으로, DOM 노드를 쿼리하고 상호 작용하여(JSDOM/Jest로 시뮬레이션하든 브라우저에서 시뮬레이션하든) 웹 페이지를 테스트합니다. 이 라이브러리가 제공하는 주요 유틸리티는 사용자가 페이지에서 요소를 찾는 방식과 유사한 방식으로 DOM에서 노드를 쿼리하는 것을 포함합니다. 이러한 방식으로 라이브러리는 테스트를 통해 실제 사용자가 애플리케이션을 사용할 때 애플리케이션이 작동할 것이라는 확신을 줄 수 있도록 도와줍니다.

import { render, screen } from "@testing-library/react";
import StaticComponent from "./StaticComponent";

beforeEach(() => {
  render(<StaticComponent />);
});

jest-dom 

custom jest matcher다. (jest의 dom관련 확장판이라고 생각)
testing-library에서 한번은 import해줘야 함

The @testing-library/jest-dom library provides a set of custom jest matchers that you can use to extend jest. These will make your tests more declarative, clear to read and to maintain.

@testing-library/jest-dom

 

@testing-library/jest-dom 라이브러리는 제스트를 확장하는 데 사용할 수 있는 사용자 지정 제스트 매쳐를 제공합니다. 이를 통해 테스트를 보다 선언적이고 읽기 쉽고 유지 관리하기 쉽게 만들 수 있습니다.

 

usage
Import @testing-library/jest-dom once (for instance in your tests setup file) and you're good to go:

 

 

setupTests.ts파일

import "@testing-library/jest-dom";

 

 

정리

jsdom은 js에서 DOM을 사용할 수 있게 하는 것
testinglibrary는 DOM에서 요소를 찾는 것 - 사용자가 페이지에서 요소 찾는것과 유사하게 (렌더 등을 담당)
jest-dom은 dom의 노드들을 테스트함 jest의 dom관련 확장판이라고 생각하면 될듯