Memeriksa anak-anak yang diteruskan ke komponen React tiruan

Untuk mengantisipasi dimulainya kursus  Otomasi Tes JavaScript, kami  terus menerbitkan terjemahan dari serangkaian artikel bermanfaat.

Ini adalah bagian ketiga dari seri tentang pengujian dengan React. Di bagian terakhir, kami membahas format dasar untuk mengejek komponen React .

Hal lain yang dapat Anda lakukan dengan ejekan adalah memeriksa apakah anak yang lulus benar. Sebenarnya itulah yang akan kita lihat sekarang.

Semua contoh kode untuk artikel ini tersedia di repositori ini.

dirv / mocking-react-components

Bayangkan kita ingin memasukkan formulir berlangganan buletin di dalamnya PostContent. Kita bisa melakukan ini dengan memberikan anak-anak padanya.

Inilah komponen yang diperbarui 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>
  )
}

Yang penting adalah tes kami BlogPageseharusnya tidak peduli apa PostContent pengaruhnya terhadap anak-anak. Mereka hanya harus memastikan bahwa mereka diserahkan kepadanya.

, 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