首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在React Testing Library中测试传入Apollo GraphQL查询的数据的形状?

在React Testing Library中测试传入Apollo GraphQL查询的数据的形状,可以通过以下步骤进行:

  1. 导入所需的测试工具和库:
代码语言:txt
复制
import { render, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing';
import { gql } from '@apollo/client';
import MyComponent from './MyComponent';
  1. 创建一个模拟的GraphQL查询,该查询应该与组件中实际使用的查询保持一致:
代码语言:txt
复制
const GET_DATA_QUERY = gql`
  query GetData {
    data {
      id
      name
      age
    }
  }
`;
  1. 创建模拟的GraphQL响应数据:
代码语言:txt
复制
const mockResponse = {
  data: {
    data: {
      id: '1',
      name: 'John',
      age: 30,
    },
  },
};
  1. 使用MockedProvider包装组件,并传入模拟的GraphQL响应数据:
代码语言:txt
复制
const mocks = [
  {
    request: {
      query: GET_DATA_QUERY,
    },
    result: mockResponse,
  },
];

render(
  <MockedProvider mocks={mocks} addTypename={false}>
    <MyComponent />
  </MockedProvider>
);
  1. 在测试中使用waitFor等待组件加载完毕,并进行断言验证查询数据的形状:
代码语言:txt
复制
await waitFor(() => {
  const idElement = getByText('ID: 1');
  const nameElement = getByText('Name: John');
  const ageElement = getByText('Age: 30');

  expect(idElement).toBeInTheDocument();
  expect(nameElement).toBeInTheDocument();
  expect(ageElement).toBeInTheDocument();
});

以上步骤中的MyComponent是被测试的组件,根据实际情况替换为实际的组件名称。通过MockedProvider提供模拟的GraphQL响应数据,并使用waitFor等待组件加载完毕后进行断言验证数据的形状。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

写在 2021: 值得关注学习前端框架和工具库

对于我认为较为主流则不会包含(Vue与React框架本身这种~)。...React-Testing-Library[10],React测试库,个人感觉和Enzyme代表了两个不同方向,而RTL更符合直觉。RTL还提供了Hooks测试库,给力奥。...在TS这个工具主要能力就是生成TS类型定义,同时它插件体系还提供了更多额外能力,Apollo-Client插件,让你可以直接使用封装好useXXXQuery等,前端连查询语句都不用写了...,ApollouseQuery接收GraphQL Document,BlitzJS则接收是后端方法,其中会直接db.entity.create()这样去写数据库)。...: https://github.com/gatsbyjs/gatsby [10] React-Testing-Library: https://github.com/testing-library/react-testing-library

4.2K10

何在 React.js 项目中使用 GraphQL

在本指南中,我们将介绍如何将 GraphQL 无缝集成到您 React.js 项目中。什么是 GraphQLGraphQL 是用于 API 查询语言,也是用于执行那些查询运行时。...它允许您仅请求所需数据,从而使 API 调用更加高效。与传统 REST API 不同,传统 REST API 由服务器确定响应结构,而 GraphQL 则使客户端能够定义其所需数据形状和结构。...:npm install graphql @apollo/client@apollo/client 软件包是 Apollo Client,这是一个强大库,用于在 React 应用程序管理状态并进行...: new InMemoryCache(),});export default client;在 React 组件中使用 GraphQL 获取数据现在,让我们使用 GraphQLReact 组件获取数据...我们使用 @apollo/client useQuery 钩子执行 GET_POSTS 查询

39840

在 redux 应用中使用 GraphQL

正如 Sashko Stubailo 指出: 不幸是,在 Redux 应用程序异步加载服务器数据模式还没有建立起来,并且经常需要使用外部帮助程序库, redux-saga。...在该页您可以看到一个如下 GraphQL 界面: ? GraphiQL 允许您测试不同查询,并立即看到从服务器获得响应。...客户端正在运行,现在是开始添加 GraphQL 客户端时候了。我们目标是使用 GraphQL 查询,从服务器轻松获取数据并将其呈现在着陆页(HomeView)。 3....增加 mapQueriesToProps() 并且定义一个能够获取作者信息 GraphQL 查询。注意,这个查询语句其实和我们之前在 GraphIQL 界面上测试语句是一样。...接下来 这篇教程只探索了 GraphQL 一小部分,还有许多内容尚未涉及,比如在服务端更新数据或者使用其他服务端( Rails)。

1.9K10

2020 年你应该知道 React

所有 React 内置 hooks 都非常适合本地状态管理。当涉及到远程数据状态管理时,如果远程数据带有 GraphQL 端点,我建议使用 Apollo Client。...Apollo Client 替代方案是 urql 和 Relay。 如果远程数据不是来自 GraphQL 端点,请尝试使用 React Hooks 来管理它。...如果您有足够时间来处理 GraphQL API,我建议您使用 Apollo Client。可供选择 GraphQL 客户端将是 urql 或 Relay。...最终,您会发现自己在使用 Enzyme 或 React Testing Library (这两个都在 Jest 测试环境中使用)来进行更详细测试功能集。...Formik 或者 React Hook Form 测试库: Jest with React Testing Library and Cypress 实用程序库: JavaScript api,Lodash

14.4K40

「首席架构师推荐」React生态系统大集合

ReactJavaScript测试实用程序 react-testing-library - 简单而完整React DOM测试实用程序 react-hooks-testing-library - React...挂钩测试实用程序,鼓励良好测试实践 Reactreact-border-wrapper - 用于在React沿div边界放置元素包装器。...ClojureScript不可变数据库和Datalog查询引擎 immstruct - 不可变数据结构,具有基于组件库(React从上到下属性历史记录 seamless-immutable...GraphQL教程 GraphQL简介 关于GraphQL第一个想法 以类似的方式在GraphQL建模查询 Thin and Graphy GraphQL概述 - GraphQL和Node.js入门...脚本,用于更新中继API Apollo 基于GraphQL数据堆栈 阿波罗综合资源 阿波罗官方网站 Apollo GitHub 阿波罗博客 Apollo Slack Apollo工具 react-apollo-redux

12.3K30

写在2021: 值得关注学习前端框架和工具库

对于我认为较为主流则不会包含(Vue与React框架本身这种~)。...React-Testing-LibraryReact测试库,个人感觉和Enzyme代表了两个不同方向,而RTL更符合直觉。RTL还提供了Hooks测试库,给力奥。...在TS这个工具主要能力就是生成TS类型定义,同时它插件体系还提供了更多额外能力,Apollo-Client插件,让你可以直接使用封装好useXXXQuery等,前端连查询语句都不用写了...useQuery接收GraphQL Document,BlitzJS则接收是后端方法,其中会直接db.entity.create()这样去写数据库)。...RedwoodJS,基于React + Prisma + GraphQL,整体类似于Blitz,但文档全面的多,最佳实践、测试、迁移、路线规划都有非常详细介绍,甚至还介绍了框架名字由来。

2.8K10

GraphQL在现代Web应用应用与优势

GraphQL是一种现代API查询语言,它在现代Web应用得到了广泛应用,因为它提供了一种高效、灵活且强大方式来获取数据GraphQL基础快速应用示例:1....查询语言:查询、突变、订阅在GraphQL查询和突变是通过JSON-like结构表示字符串。...查询结构:字段和参数查询结构由字段和参数组成。在上面的查询示例,user是字段,id和email是user字段子字段。参数id: 1用于定制查询。4....组件,我们使用useQuery从GraphQL服务器获取数据,并渲染用户和他们帖子信息。...减少错误:客户端定义查询结构,服务器返回预期形状,降低了由于接口不匹配导致错误。更好API设计:强类型系统确保了数据一致性和正确性,使得API更加易于理解和维护。

7910

用TS+GraphQL查询SpaceX火箭发射数据

apollo-boost 包含了查询 API 和在内存缓存数据所需工具, react-apolloReact提供绑定, react-apollo-hooks 在 React Hook 包装了...我们将在列表显示这些数据,当用户点击其中一个项目时,查询 launch 来获取该火箭更多数据。让我们在 GraphQL playground 测试第一个查询。 ?...由于这将通过用户交互动态生成,所以需要用到 GraphQL 变量。我们还可以在 playground 上测试带变量查询。...将ID作为查询变量传递 我们传入 id 作为变量,它对应于 LaunchList 查询 flight_number。...在终端执行: 1yarn codegen 在 src/generated/graphql.ts ,你将会找到定义程序所需所有类型,以及获取 GraphQL 端点以检索该数据相应查询

3K20

2020全球JS报告调查结果,请查收

但是这次区别是,相对而言,“老”后卫什么都没走。 Svelte和Snowpack很棒,但是React和webpack也很棒。...兴趣度 满意度 数据层 使用排名比较高状态管理依旧是Redux、Vuex、Mobx。 数据管理为 GraphQLApollo,并且 XState 横空出世。...其他工具 测试框架 Jest和 Mocha 在使用量上依旧是统治地位,但是新增了 Testing Libray 很强劲。 以下是满意度排行。 什么是 Testing Library ?...用于 DOM 和 UI 组件测试一系列工具,主要 API 包含 DOM 查询,更可以和其他测试工具(jest、cypress)配合,用于更多场景(react、vue、svelte)。...而它是 React 官方推荐。 我们推荐使用 React Testing Library,它使得针对组件编写测试用例就像终端用户在使用它一样方便。

1.1K00

使用Django和GraphQL实现前后端分离架构教程

前端通常使用现代JavaScript框架(React、Vue、Angular)进行开发,而后端使用服务器端语言和框架(Django、Express等)进行开发。...三、使用Django和GraphQL实现前后端分离GraphQL是一种用于API查询语言,可以提供更灵活和高效数据查询方式。...相比传统RESTful API,GraphQL允许客户端明确指定需要数据结构,从而减少了数据传输量和请求次数。以下是使用Django和GraphQL实现前后端分离详细步骤。...安装ReactApollo Client:npx create-react-app blog-frontendcd blog-frontendnpm install @apollo/client graphql...实现前后端分离架构,可以充分利用GraphQL灵活查询能力和Django强大后端支持。

14600

【译】Graphql, gRPC和端对端类型检验

只需要在我们schema增加查询(queries)和变更(mutations)字段,就可以在应用中使用(consuming)这些数据了。...使用apollo-client和react-apollo简化了前端代码对缓存和数据管理。 灵活查询方式方便我们在未来构建移动端以及内部应用。...GraphQL schema自检性让我们可以方便查询系统全部可用数据。 (如果你想更深入学习GraphQL,我推荐你去看看官方指引) 我们GraphQL服务主要是干数据透传活儿。...为了保证GraphQL server和前端之间类型安全,我们使用Apollo CLI代码生成器:使用命令行来生成我们所有GraphQL查询类型: React示例 在我们应用需要用到三种查询:...GraphQL、gRPC、React和TypeScript,我们既享受了查询数据灵活性,也保证了我们后端服务之间原子性。

3.1K20

怎样使用 apollo-link-state 管理本地数据

要实现一个理想状态管理方案,我们应当对 Redux 取长弃短。此外,GraphQL 有能力将对多个数据请求集成在单次查询,在此我们将充分利用这个特性。 ....尽管不是必需参数,不过预热缓存是一个很重要步骤,传入 default 使得组件不会因为查询不到数据而出错。 . 以上代码 defaults 代表了 Apollo cache 初始值。...Resolvers 在使用 Apollo Client 管理应用状态后,Apollo cache 成为了应用单一数据源,包括了本地和远端数据。那么我们应当如何查询和更新缓存数据呢?...以上 Resolver 函数是查询和更新 Apollo cache 方法。 若要在 Apollo cache 根上写入数据,可以调用 cache.writeData 方法并传入相应数据。...在下面的例子,我们在同一条 query 内查询GraphQL 服务器存储 user 数据以及 Apollo cache visibilityFilter 数据。 .

2.3K100

2023 React 生态系统,以及我一些吐槽……

RTK Query 从先驱解决数据获取问题其他工具( Apollo Client、React Query、Urql 和 SWR)获得灵感,但在其 API 设计增加了独特方法: 数据获取和缓存逻辑是构建在...UI 层一起使用 API 端点是预先定义,包括如何从参数生成查询参数和将响应转换为缓存方式 RTK Query 还可以生成封装整个数据获取过程 React hooks,为组件提供数据和 isLoading...这复杂 API 风格,欣赏不来。 Apollo Client Apollo Client 是一个全面的 JavaScript 状态管理库,可让您使用 GraphQL 来管理本地和远程数据。...核心 @apollo/client 库提供了与 React 内置集成,而更大 Apollo 社区则维护了与其他流行视图层集成。 应该是用 GraphQL状态管理最佳选择。...Vitest React Testing Library Playwright 样式 Tailwind CSS Styled Components Emotion Taiwlind 就不需要多介绍了

67430

来试试Graphql

GraphQL 可精准返回所需数据结果,减少数据传输大小。 嵌套复杂数据仅需一次调用 RESTful 对于嵌套复杂数据需要多次调用,而 GraphQL 只需要一次。...resolver 解析规则是, 从外到内依次处理查询块,为每一个查询块执行对应 resolver 函数,并传递外层调用返回结果作为第一个参数,也就是下面代码 obj 。...:查询传入参数 // context:这是特定查询中所有解析程序共享对象,用于包含每个请求状态,包括身份验证信息,数据加载器实例以及解析该查询时应考虑任何其他内容 // info:此参数仅在高级情况下使用...更多内容查看 resolver 文档[3] 然后我们在 http://127.0.0.1:4000/graphql 或者在客户端 GraphiQL 测试 ?...已经成功找到对应 id 数据了,但是这里 id 是写死,我们说 graphql 最大好处是声明式获取,那如何把 id 变成一个变量,让外部传入? ?

1.9K20

为什么我使用 GraphQL 而放弃 REST API?

此模式其他变体和查询也是如此:对输入进行类型检查和验证,并且基于查询GraphQL 服务器知道期望结果形状。...如果使用一些现成 GraphQL->数据查询翻译库,你甚至不需要在服务器上编写大多数数据查询。...客户端库可以很容易地将 GraphQL 响应自动解包为所需类型对象实例,因为从模式和查询可以提前知道响应形状GraphQL 是个时髦东西,是一种时尚,对吗?...有很多流行开源项目都在使用 GraphQL:这个博客是基于静态站点生成器 Gatsby,它将 GraphQL 查询结果转换成数据,然后呈现到 HTML 文件。...由于 Apollo 客户端库架构简单,我能够将一个使用 React.js 与 Redux 应用慢慢过渡到 React Apollo,一个组件一个组件,只在有意义时候才这样做。

2.3K30

GraphQL最突出架构优势是什么?

Apollo 发布了带有 apollo-link-state Apollo Client 后,React 开发人员就能用更少代码满足所有这三个需求了。...Apollo-link-state(现已直接放入 Apollo Client 2 和 3 )让开发人员可以编写几乎同时解决远程状态和本地状态查询。远程状态(位于服务器上)感觉比之前近多了。...数据图从客户端延伸到服务器,并为现代 Web 应用程序获取数据和更改状态时面临最常见基础架构问题提供了答案 为了通过 GraphQL 与后端服务通信,Apollo Client 公开了几种客户端方法...通过 Apollo Federation,我们可以绘制并公开由多个 GraphQL 端点组成单个数据图 在 Federation ,你可以组成模式并解析其他服务 / 限界上下文中字段。...在架构层面,由于 GraphQL 仅向客户端公开单个端点,因此它满足了这一原则。 客户端隐藏了字段解析机制所有复杂性,它只需关注如何在 GraphQL 服务器之上构建即可。

2.1K20
领券