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

问题是，我不想为每个组件上已经在其他地方进行过测试的功能添加测试，因此我认为仅测试组件的渲染和我已经足够就足够了。 m将正确的道具传递给它。

我已经可以使用像这样的酶轻松地对此进行测试：

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

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

Answer 1

这是Rent的创建者Kent C. Dodds与他讨论后的推荐方法：

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

当然，这仅适用于props中的原始值，但是验证诸如对象或函数之类的东西会比较困难。

认为，这不是RTL方式，但是我同意检查每个容器的范围（并完全忽略这是相当大的风险）将是一项艰巨的工作。

PS toHaveAttribute来自jest-dom

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

2 个答案: