Reactjs 使用 reacttestinglibrary 时如何测试组件是否使用正确的props呈现

发布于10月31日

我有一些组件正在呈现另一个已经单独测试的组件(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>
)

问题是，我不想为已经在其他地方测试过的功能在这些组件中的每一个上添加测试，所以我认为这应该足以测试组件是否呈现，以及我是否向其传递了正确的props .

我可以很容易地用这样的Enzyme 来测试这一点:

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

所以我想知道用React testing library来测试它的最好方法是什么.

import FetchNextPageButton from 'FetchNextPageButton' jest.mock('FetchNextPageButton', () => { return jest.fn(() => null) }) // ... in your test expect(FetchNextPageButton).toHaveBeenCalledWith(props, context)

Reactjs 使用 reacttestinglibrary 时如何测试组件是否使用正确的props呈现

推荐答案

Reactjs相关问答推荐

实时收听react前端应用程序中的webhook响应

在此上下文中如何在缓冲(隐藏)视频和渲染视频之间切换？

react-hook-form问题：为什么getValues不返回大多数当前值？

在react中向数组状态添加值时出错

在Reaction+Redux+RTKQuery中对API调用进行排序

ReactJs；Reaction-Hook-Form：仅当 Select 了特定 Select 列表选项时才显示文本输入

App.js中的H2组件不会动态呈现.这可能是什么问题？

基本react 应用程序正在触发两次Use Effect

React-React中是否完全支持基于类的组件？

列表中的每个子项都应该有一个唯一的keyprops .在react 应用程序中

在React Router 6中，在路由渲染后更新路由数据

React：如何使用条件渲染和react 挂钩来更新另一个组件的状态？

如何使用样式化函数为 TextField 的输入组件设置样式

Suspense/Await - 解析数据加载/保存到状态后无限循环

为什么刷新页面时我的localStorage PET值变成空字符串？

null 不是对象(判断RNSound.IsAndroid)

如何通过 id 从 useSprings 数组中删除元素

理解 React 中的 PrevState

npm init vite@latest 和 npm init vite 有什么区别？

如何跟踪 dexie UseLiveQuery 是否完成