Jest

  1. 쿼리함수
  2. ESLINT PlugIn
  3. TDD 테스트 주도 개발
  4. FireEvent
  5. query 사용 우선순위
  6. MSW 사용해서 테스트하기

쿼리란 무엇인가?

query - (getAllBy)

<aside> 💡 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없거나 둘 이상의 일치가 발견되면 설명 오류를 발생시킨다. 둘 이상의 요소가 사용되는 경우 getAllby를 사용한다

</aside>

const IndexTest = () => {
  return (
    <>
      <div>인덱스테스트</div>
      <div>인덱스테스트</div>
    </>
  );
};

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

test("배운거 써먹기", () => {
  render(<IndexTest />);
  const testText = screen.queryByText(/인덱스테스트/i);
  expect(testText).toBeInTheDocument();
});

query - (queryAllBy)

<aside> 💡 쿼리에 대해 일치하는 노드를 반환하고 일치하는 요소가 없으면 null을 반환한다. 이것은 존재하지 않는 요소를 어설셜하는 데 유용하다. 둘 이상의 일치 항목이 발견되면 오류가 발생한다.

</aside>

const IndexTest = () => {
  return (
    <>
      <div>인덱스 테스트</div>
    </>
  );
};

test("배운거 써먹기", () => {
  render(<IndexTest />);
  const testText = screen.queryByText(/인덱스 테트/i);
  expect(testText).toBeInTheDocument();
});

query - findBy (findAllBy)

<aside> 💡 주어진 쿼리와 일치하는 요소가 발견되면 Promise를 반환한다. 여소가 발견되지 않거나 기본 제한 시간인 1000ms 후에 둘 이상의 요소가 발견되면 Promise가 거부된다.

</aside>

WhatIsWaitfor?