模擬Reactコンポーネントに渡された子をチェックする

JavaScript Test Automationコースの開始を見越して  、一連の有用な記事の翻訳を引き続き公開しています。

これは、Reactを使用したテストに関するシリーズの第3部です。最後のパートでは、Reactコンポーネントをモックするための基本的なフォーマットについて説明しました。

モックでできるもう1つのことは、正しい子供が渡されたかどうかを確認することです。それが実際に私たちが今見ているものです。

この記事のすべてのコードサンプルは、このリポジトリで入手できます。

dirv / mocking-react-components

内にニュースレター購読フォームを挿入したいとし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.objectContain.

expect.objectContain

! . . children - : , , ID, -, .

content, expect.objectContain :

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

, ?

• , , `jest.fn (({children}) = {children})

• toContainElement jest-dom, , .

• expect.objectContain , .

• Jest clearMocks, , .

.

  - : " puppeteer".

:

• ! React Testing Library

• React