使用react-testing-library测试组件是否使用正确的道具进行渲染 [英] Test if a component is rendered with the right props with react-testing-library
问题描述
我有一些组件正在渲染另一个已经被隔离测试的组件(FetchNextPageButton),例如:
I have some components that are rendering another component (FetchNextPageButton) that is already tested in isolation, like these ones:
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将正确的道具传递给它.
The thing is that I'd not like having to add tests on each of these components for a functionality that is already tested somewhere else, so I think that should be enough just to test that the component is rendered and that I'm passing the right props to it.
我已经可以使用像这样的酶轻松地对此进行测试:
I'd have been able to test this easily with Enzyme with something like this:
expect(wrapper.find('FetchNextPageButton').props()).toMatchObject({
query: NEWS_QUERY,
path: "viewer.news"
})
所以我想知道使用反应测试库.
推荐答案
这是Kent C. Dodds(RTL的创建者)在与我讨论后与我分享的方法:
This is the approach that Kent C. Dodds (the creator of RTL) shared with me after discussing it with him:
import FetchNextPageButton from 'FetchNextPageButton'
jest.mock('FetchNextPageButton', () => {
return jest.fn(() => null)
})
// ... in your test
expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)
这篇关于使用react-testing-library测试组件是否使用正确的道具进行渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!