Verificando os filhos passados ​​para um componente React simulado

Prevendo o início do curso de  Automação de Teste de JavaScript,  continuamos a publicar a tradução de uma série de artigos úteis.

Esta é a terceira parte de uma série sobre testes com React. Na última parte, cobrimos o formato básico para simulação de componentes React .

Outra coisa que você pode fazer com os mocks é verificar se os filhos corretos foram passados. Na verdade, é isso que veremos agora.

Todos os exemplos de código para este artigo estão disponíveis neste repositório.

dirv / mocking-react-components

Imagine que queremos inserir um formulário de assinatura de boletim informativo dentro PostContent. Podemos fazer isso passando filhos para ele.

Este é o componente atualizado 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>
  )
}

O importante é que nossos testes BlogPagenão se importem com o que PostContent fazem às crianças. Eles só precisam ter certeza de que serão entregues a ele.

, 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