Clever Geek Handbook

Vérification des enfants passés à un composant React simulé

En prévision du début du cours d'  automatisation des tests JavaScript, nous  continuons à publier la traduction d'une série d'articles utiles.

Ceci est la troisième partie d'une série sur les tests avec React. Dans la dernière partie, nous avons abordé le format de base pour la simulation de composants React .

Une autre chose que vous pouvez faire avec des simulations est de vérifier si les bons enfants ont été transmis. C'est en fait ce que nous allons examiner maintenant.

Tous les exemples de code de cet article sont disponibles dans ce référentiel.



dirv / mocking-react-components

Imaginez que nous souhaitons insérer un formulaire d'inscription à la newsletter à l'intérieur PostContent. Nous pouvons le faire en lui passant des enfants.

Voici le composant mis à jour 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>
  )
}

L'important est que nos tests BlogPagene devraient pas se soucier de ce qu'ils PostContent font aux enfants. Ils doivent simplement s'assurer qu'ils lui sont remis.

, 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".

:



More articles:


All Articles