Проверьте, отображается ли компонент с правильными реквизитами, с библиотекой реагирования-тестирования

Question

У меня есть некоторые компоненты, которые визуализируют другой компонент (FetchNextPageButton), который уже тестируется изолированно, например:

const News = () => (
  <div>
    <h1>News</h1>
    ...
    <FetchNextPageButton query={NEWS_QUERY} path="viewer.news" />
  </div>
)

const Jobs = () => (
  <div>
    <h1>Jobs</h1>
    ...
    <FetchNextPageButton query={JOBS_QUERY} path="viewer.jobs" />
  </div>
)

const Posts = () => (
  <div>
    <h1>Posts</h1>
    ...
    <FetchNextPageButton query={POSTS_QUERY} path="viewer.posts" />
  </div>
)

Дело в том, что мне не хотелось бы добавлять тесты на каждыйиз этих компонентов для функциональности, которая уже проверена где-то еще, так что я думаю, этого должно быть достаточно просто для проверки того, что компонент визуализируется и что я передаю ему правильные реквизиты.

Я быЯ смог легко протестировать это с помощью Enzyme с помощью чего-то вроде этого:

expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({
  query: NEWS_QUERY,
  path: "viewer.news"
})

Так что мне интересно, как лучше всего протестировать его, используя вместо этого Библиотека тестирования React .

Answer 1

Это рекомендуемый подход Кента С. Доддса (создателя RTL) после обсуждения с ним:

import FetchNextPageButton from 'FetchNextPageButton'

jest.mock('FetchNextPageButton', () => {
  return jest.fn(() => null)
})

// ... in your test
expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)

Answer 2

Не верь, что это возможно. RTL похоже на то, чтобы сосредоточиться на проверке по DOM, а не по дереву компонентов React.

Единственный обходной путь, который я вижу, - это смоделируйте FetchNextPageButton, чтобы заставить его переводить все реквизиты в атрибуты.

jest.mock("../../../FetchNextPageButton.js", () => 
  (props) => <div data-test-id="FetchNextPageButton" {...props} />);
....
const { getByTestId } = render(<YourComponent />);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("query", NEWS_QUERY);
expect(getByTestId("FetchNextPageButton")).toHaveAttribute("path", "viewer.news");

Конечно,это гладко только для примитивных значений в подпорках, но проверка чего-то вроде объекта или функции будет сложнее.

Думаю, это не RTL-путь, но я согласен, что было бы очень сложно проверить это в объеме каждого контейнера (и полностью игнорировать это было бы довольно рискованно).

PS toHaveAttribute от jest-dom