javascript - 使用 react-testing-library 时如何测试组件是否使用正确的 props 渲染？

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>
)

问题是，我不想为已经在别处测试过的功能在这些组件中的每一个上添加测试，所以我认为这应该足以测试组件是否已呈现并且我我将正确的 Prop 传递给它。

我已经能够用像这样的 Enzyme 轻松地测试它:

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

所以我想知道使用 React testing library 测试它的最佳方法是什么相反。

Answer 1

这是 Kent C. Dodds(RTL 的创建者)在与他讨论后分享给我的方法:

import FetchNextPageButton from 'FetchNextPageButton'

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

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