javascript - 使用react-testing-library测试组件是否使用正确的 Prop 进行渲染

我有一些组件正在渲染另一个已经独立测试的组件(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来测试它的最佳方法是什么。

最佳答案

这是Kent C. Dodds(RTL的创建者)与他讨论后推荐的方法:

import FetchNextPageButton from 'FetchNextPageButton'

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

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