React 모의 구성 요소에 전달된 자식 확인

이것은 React 테스트 시리즈의 세 번째 부분입니다. 마지막 부분에서는 .

모의 객체로 수행할 수 있는 또 다른 작업은 올바른 자식이 통과되었는지 테스트하는 것입니다. 그것이 우리가 지금 살펴볼 것입니다.


이 게시물의 모든 코드 샘플은 다음 리포지토리에서 사용할 수 있습니다.

dirv / 조롱 반응 구성 요소

React 구성 요소를 조롱하는 방법의 예

PostContent 안에 메일링 리스트 등록 양식을 삽입한다고 상상해 보십시오. 하위 요소를 전달하여 이를 수행할 수 있습니다.

새로 개선된BlogPage 구성 요소는 다음과 같습니다.

export const BlogPage = ({ url }) => {

  const id = getPostIdFromUrl(url)

  const handleSignUp = () => {
    // ...
  }

  return (
    <PostContent id={id}>
      <input type="email" placeholder="Sign up to my mailing list!" />
      <button onClick={handleSignUp}>Sign up</button>
    </PostContent>
  )
}

결정적으로, 우리의 BlogPage 테스트는 PostContent가 아이들에게 무엇을 하는지 신경쓰지 않아야 합니다. 그들은 그것이 아이들에게 주어진 것에 관심을 가져야 합니다.
children 항목에서 .mock.calls 소품을 꺼내서 render로 렌더링하여 이를 테스트할 수 있습니다. 즉, 렌더 소품처럼 취급합니다.

그러나 더 간단한 방법이 있습니다. 모의 구성 요소를 수정하여 렌더링하는 것입니다children.

jest.mock("../src/PostContent", () => ({
  PostContent: jest.fn(({ children }) => (
    <div data-testid="PostContent">{children}</div>
  ))
}))

이제 button가 PostContent의 자식으로 렌더링되었는지 확인하는 테스트를 작성할 수 있습니다.

it("renders the mailing list sign up button as a child of PostContent", () => {
  render(<BlogPage url="http://example.com/blog/my-web-page" />)

  const postContentElement = screen.getByTestId("PostContent")

  const button = screen.queryByRole(
    "button", { name: "Sign up" })

  expect(postContentElement).toContainElement(button)
})

input 필드에 대해 동일한 기술을 반복할 수 있습니다.

이 테스트를 실행하면 문제가 있음을 알 수 있습니다. 전달된 소품을 확인하는 이전 테스트는 이제 실패합니다. 그 기대는 다음과 같았습니다.

  expect(PostContent).toHaveBeenCalledWith(
    { id: postId },
    expect.anything())

이 테스트에 따르면 예상치 못한 children 소품이 갑자기 생겼기 때문에 실패하고 있습니다.
expect.objectContaining 를 사용하여 수정합니다.

expect.objectContaining을 사용하여 테스트 범위를 좁히십시오.

단일 모의 구성 요소 호출에 대해 여러 단위 테스트를 수행하는 것이 종종 유용합니다! 나는 일반적으로 모든 소품이 지정된 하나의 테스트로 시작합니다. 그러나 충분히 복잡한 prop 값의 경우 좋은 테스트 설명과 함께 자체 테스트로 분할하는 것이 유용할 수 있습니다. children 소품은 특별한 경우입니다. 올바른 ID를 전달하는지 확인하는 테스트는 표시되는 삽입 콘텐츠와 관련이 없습니다.


예상에서 content를 사용하여 테스트expect.objectContaining를 피할 수 있습니다.

  expect(PostContent).toHaveBeenCalledWith(
    expect.objectContaining({ id: postId }),
    expect.anything())

더 많은 수업

그래서 우리는 지금 무엇을 배웠습니까?

모의에 전달된 자식을 테스트하려면 모의 구성 요소를 `jest.fn(({ children }) = {children})으로 수정합니다.

toContainElement 매처 패키지의 jest-dom를 사용하여 구성 요소가 조롱된 구성 요소의 자식으로 렌더링되는지 확인합니다.

소품이 변경될 때 중단되지 않는 단위 테스트를 작성하려면 expect.objectContaining를 사용하십시오.

Jest의clearMocks 구성 설정을 사용하여 각 테스트 전에 스파이를 제거하십시오.

4부에서는 어떻게 진행되는지 살펴보겠습니다.