Überprüfen von Kindern, die an eine Scheinreaktionskomponente übergeben wurden

Im Vorgriff auf den Beginn des JavaScript Test Automation- Kurses  veröffentlichen wir  weiterhin die Übersetzung einer Reihe nützlicher Artikel.

Dies ist der dritte Teil einer Reihe über das Testen mit React. Im letzten Teil haben wir das Grundformat für das Verspotten von React-Komponenten behandelt .

Eine andere Sache, die Sie mit Mocks machen können, ist zu überprüfen, ob die richtigen Kinder übergeben wurden. Genau das werden wir uns jetzt ansehen.

Alle Codebeispiele für diesen Artikel sind in diesem Repository verfügbar.

Dirv / Mocking-React-Komponenten

Stellen Sie sich vor, wir möchten ein Newsletter-Anmeldeformular einfügen PostContent. Wir können dies tun, indem wir Kinder daran weitergeben.

Hier ist die aktualisierte Komponente 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>
  )
}

Wichtig ist, dass es unseren Tests BlogPageegal ist, was sie PostContent den Kindern antun. Sie müssen nur sicherstellen, dass sie ihm übergeben werden.

, 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