Проверка дочерних элементов передаваемых в мок React компонента

В преддверии старта курса «Автоматизация тестирования на JavaScript» продолжаем публиковать перевод серии полезных статей.

Это третья часть из серии о тестировании с React. В прошлой части мы рассмотрели базовый формат моков React компонентов.

Еще одна вещь, которую вы можете сделать с помощью моков, - это проверить, правильные ли дочерние элементы были переданы. Вот собственно на это мы сейчас и посмотрим.

Все образцы кода для этой статьи доступны в этом репозитории.

dirv / mocking-react-components

Представьте, что мы хотим вставить форму подписки на рассылку внутри PostContent. Мы можем сделать это, передав ему дочерние элементы.

Вот обновленный компонент 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>
  )
}

Важно то, что наши тесты BlogPage не должно волновать то, что PostContent делает с дочерними элементами. Они должны просто позаботиться о том, чтобы они ему были переданы.

Мы могли бы проверить это, вытащив пропс 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 компонентов