React Testing Library 1 도전(현재 진행형)

안녕하세요.
최근 유튜브에 Amplify 영상이 올라왔는데 꼭 봐주세요.
그리고 나서
이번에는 이쪽 동영상을 보고 생각해낸 거야.
시험이 중요하잖아.
이렇게 리액트 테스팅 리브레리에 도전한다는 기사다.
감상문이 쓰여 있어서 샤오퍼는 환영한다.
만약 이 점이 잘못되었다고 지적한다면 증거를 첨부하면 이해하기 쉽다
근거를 찾아주세요. 저는 단지 잘못을 저질렀을 뿐입니다.정신적으로 피곤하니까 그러지 마세요.

대상

초보 기사
중급자 및 고급자는 브라우저 패키지입니다.

Render.test

우선, React를 렌더링할 때 어떤 요소가 렌더링되는지 확인할 수 있다
하나하나 보다
예를 들어 다음과 같은 js 파일이 있다고 가정하면

import React from "react";

const Render = () => {
  return (
    <div>
      <h1>React Testing Library Lesson</h1>
      <input type="text" />
      <button>ClickA</button>
      <button>ClickB</button>
      <p>Matsumoto Kazumasa</p>
      <span data-testid="kazumasa">@React</span>
    </div>
  );
};

export default Render;

다음 테스트는 여기에 있습니다.

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

describe("Rendering", () => {
  it("Matsumoto Kazumasa Should render all the elements correctly", () => {
    render(<Render />);
    expect(screen.getByRole("heading")).toBeTruthy();
    expect(screen.getByRole("textbox")).toBeTruthy();
    expect(screen.getAllByRole("button")[0]).toBeTruthy();
    expect(screen.getAllByRole("button")[1]).toBeTruthy();
    expect(screen.getByText("Matsumoto Kazumasa")).toBeTruthy();
    expect(screen.queryByText("Matsumoto Kiyokazu")).toBeNull();
    expect(screen.getByTestId("kazumasa")).toBeTruthy();
  });
});

describe, it,expect 같은 거?

일단 describe.
이것은 테스트의 한 단락이다.
뭘 테스트해?이런 인식이면 되는 거죠?
맛있는 초밥 같은 거 먹고 싶어요.
다음은 it.
그 단계의 임무를 완수하기 위해 헤어진 것 같아요.
가게를 예약하다
노선을 확인해 보다
차를 몰고 가다
이렇게 초밥을 먹기 위해 필요한 미션을 어느 정도 크기로 나누는 형식이 될 것 같아요.
마지막으로 expect
가게를 결정하는 사이트가 움직일까요?
검색 결과가 정상입니까?
휘발유 넣었어요?
구글맵 맞아요?
이렇게 it테스트를 완성해야 한다는 내용에 대한 인식을 기재했습니다.
당신은 등급화를 통해 관리가 더욱 쉽다고 생각합니까?
아니면 오랜 역사 속에서 등급화를 해왔던 인간들이 뇌가 등급 관리처럼 진화했을까?
그건 아직 모르겠지만, 계층 관리를 해야 할 것 같아!!

render, getByRole 및 toBeTruthy

describe("Rendering", () => {
  it("Matsumoto Kazumasa Should render all the elements correctly", () => {
    render(<Render />);
    expect(screen.getByRole("heading")).toBeTruthy();
    expect(screen.getByRole("textbox")).toBeTruthy();
    expect(screen.getAllByRole("button")[0]).toBeTruthy();
    expect(screen.getAllByRole("button")[1]).toBeTruthy();
    expect(screen.getByText("Matsumoto Kazumasa")).toBeTruthy();
    expect(screen.queryByText("Matsumoto Kiyokazu")).toBeNull();
    expect(screen.getByTestId("kazumasa")).toBeTruthy();
  });
});

.
이것

render(<Render />);

테스트 라이브러리에서 가져온 파일을 그릴 것 같습니다(로컬 환경에서)
보는 것과 같은 것을 가상적으로 그려야 할지, 아니면 인간이 보는 것과 같은 바이너리 코드를 만들어야 할지
같은 게 있을 수도 있다는 걸 알았으면 좋겠어요.
다음은screen입니다. 이것은 렌더링된 화면 화면이라고 생각합니다.
그 화면의 getBy Role("heading")은 라벨 역할을 하는 것 같다.

expect(screen.getByRole("heading")).toBeTruthy();

아까 코드에서
있기 때문에

<h1>React Testing Library Lesson</h1>

아~ 헤딩 태그가 있다는 걸 깨달았어요.
다음은 대응표입니다.
이거 봐요.
단추가 있네요.
인풋 태그가 있네요.
그런 건 확인할 수 있어.

https://github.com/A11yance/aria-query

toBeTruthy()

는 어떤 부분에 대해 코드 식별을 했다.
아래와 같은 번역 방법이 있는지 모르겠지만 지금은 그렇게 알고 있습니다.

expect(screen.getByRole("heading")).toBeTruthy();
~か？レンダーで描画したスクリーンの中にheading要素のタグは。あります

그런 경우라면 패스, 다른 경우는 Failed 느낌.

getAllByRole

expect(screen.getAllByRole("button")[0]).toBeTruthy();

렌더링된 화면에서 다음 태그 요소를 모두 찾습니다~
이런 인식.
방금 버튼 두 개 정도 했으니까 두 개 있을 것 같아.

<button>ClickA</button>
<button>ClickB</button>

expect(screen.getAllByRole("button")[0]).toBeTruthy();
expect(screen.getAllByRole("button")[1]).toBeTruthy();

getByText

이것은 이 텍스트를 찾는 것이다

expect(screen.getByText("Matsumoto Kazumasa")).toBeTruthy();

이전과 다른 것은 라벨이 아닙니다.
그러니까 표지에 둘러싸인 문자를 찾아야 한다는 거야.
이거 언제 써요?이런 인상.
예를 들어 언어 표현을 매우 중시하는 응용 프로그램을 개발했다.
그러면
"정확한 일본어 써주세요".
"적절한 일본어를 사용했는지 확인해 주세요."
이런 필요조건이 있어야 한다.
이러한 조건에 대응할 수 있는 것은 getByText이다.
더욱 구체적으로 말하다
법률 인용이 틀렸는지 테스트할 수 있다.
귀찮으시죠?
그럴 때 돼요?내 생각엔(개인 정보 보호 정책 등)

toBeNull

queryByText는 렌더링 후에 찾은 것 같습니다.
get과query의 차이는 잘 모르겠지만,query를 선택하는 것이 좋을 것 같습니다.

expect(screen.queryByText("Matsumoto Kiyokazu")).toBeNull();

toBenull 형식이 없습니다.
용도로 예를 들면
• 차별적인 표현이 포함됩니까?
• 폭력 표현이 포함됩니까?
검사할 수 있습니까?내 생각엔

expect(screen.queryByText("Matsumoto Kiyokazu")).toBeNull();

이 코드를 쓰면 Matsumoto Kiyokozau의 부분만 변경하면 그 코드가 포함됐는지 확인할 수 있어 원가도 많이 싸지겠죠.내 생각엔(현재 애플리케이션 개발에서 이 정도까지 신경 쓰는 사람은 드물다. 하지만 내가 보는 세상은 좁을 뿐이니 다른 곳에서는 이런 테스트를 중시할 것이다. 목표 SDGs)

getByTestId

탭에 데이터 테스트 id를 삽입할 수 있다고 합니다.

<span data-testid="kazumasa">@React</span>

expect(screen.getByTestId("kazumasa")).toBeTruthy();

를 통해 이 끼워 넣은 라벨이 포함되어 있는지 테스트할 수 있을 것 같습니다.
테스트 id와 탭을 연결하는 목록을 만들어야만 합니다
나는 어떤 라벨에 어떤 물건을 넣는지 테스트 코드로 공유하기 쉽다고 생각한다.
... 계속하다