Clever Geek Handbook

Comprobación de los niños pasados ​​a un componente de reacción simulado

Anticipándonos al inicio del curso de  Automatización de pruebas de JavaScript,  continuamos publicando la traducción de una serie de artículos útiles.

Esta es la tercera parte de una serie sobre pruebas con React. En la última parte, cubrimos el formato básico para burlarse de los componentes de React .

Otra cosa que puede hacer con las simulaciones es verificar si se pasaron los niños correctos. Eso es realmente lo que estamos viendo ahora.

Todos los ejemplos de código para este artículo están disponibles en este repositorio.



dirv / mocking-react-componentes

Imagine que queremos insertar un formulario de suscripción al boletín dentro PostContent. Podemos hacer esto pasándole niños.

Aquí está el componente actualizado 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>
  )
}

Lo importante es que a nuestras pruebas BlogPageno les debería importar lo que les PostContent haga a los niños. Solo tienen que asegurarse de que se las entreguen.

, 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