기본 테스트 컨테이너 변경

기본 테스트에서 라이브러리는 먼저 div를 적용할 본문에 렌더링을 추가합니다.

형식은 다음과 같습니다.

<body>
  <div>
    <YourComponent />
  </div>
</body>

그러나 경우에 따라 다른 시나리오를 테스트해야 할 수도 있습니다.

지금까지 다룬 두 가지를 적어 보겠습니다.

사용자 정의 구성 요소 래퍼(사용자 정의 요소)

HTML 기반 전자 메일(표 레이아웃으로 래핑됨)

이러한 경우 다른 유형의 래퍼를 정의하려고 합니다.

새 포장 용기 정의

예를 들어 previous article 을 봅시다. 테이블에서 App를 렌더링하려면 어떻게 해야 합니까?

현재 테스트 설정은 다음과 같습니다.

const renderComponent = ({ username }) => {
  return render(
    <UserContextProvider user={username}>
      <App />
    </UserContextProvider>
  );
};

it('should show the login option', async () => {
  renderComponent('');
  expect(screen.queryByText('Please login')).toBeInTheDocument();
});

지금까지 이상한 점은 없었습니다. 이 코드를 디버깅할 때 다음과 같은 HTML 출력이 제공됩니다.

<body>
  <div>Please login</div>
</body>

이제 Table 를 추가하는 방법을 살펴보겠습니다.
이것이 작동하려면 container 라는 렌더링 함수에 선택적 매개변수를 전달해야 합니다.

const renderComponent = ({ username }) => {
  const table = document.createElement('table');
  return render(
    <UserContextProvider user={username}>
      <App />
    </UserContextProvider>,
    {
      container: document.body.appendChild(table),
    }
  );
};

위의 코드를 실행하면 table 에 텍스트 노드를 직접 추가할 수 없으므로 오류가 발생합니다.

그러나 이제 우리가 테스트하고 있는 구성 요소가 TableBody 구성 요소라고 상상해 보십시오. 테이블 내부에서 테스트하는 것이 좋습니다.

출력은 다음과 같습니다.

<table>
  <TableBodyComponent />
</table>

맞춤 요소 테스트

제 경우에는 최근에 사용자 지정 구성 요소 래퍼를 테스트해야 했습니다. 이것은 주로 Shadow DOM에 특별히 무언가를 주입했기 때문입니다.

이에 대한 프로세스는 매우 유사합니다. 그러나 사용자 정의 요소를 새 태그로 정의합니다.

const renderComponent = ({ username }) => {
  const customTag = document.createElement('custom-tag');

  return render(
    <UserContextProvider user={username}>
      <App />
    </UserContextProvider>,
    {
      container: document.body.appendChild(customTag),
    }
  );
};

이제 출력은 다음과 같습니다.

<custom-tag> Please login </custom-tag>

대부분의 구성 요소에는 다른 컨테이너가 필요하지 않지만 이렇게 하면 컨테이너를 더 쉽게 정의할 수 있는 예외가 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나

Reference

이 문제에 관하여(기본 테스트 컨테이너 변경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydevtips1/changing-the-default-testing-container-2ia3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

기본 테스트 컨테이너 변경

새 포장 용기 정의

맞춤 요소 테스트

읽어주셔서 감사합니다. 연결합시다!

Reference

좋은 웹페이지 즐겨찾기