在使用阿波罗的MockedProvider的故事书中动态模拟是可能的吗？
在使用阿波罗的MockedProvider的故事书中动态模拟是可能的。阿波罗是一个流行的GraphQL客户端，MockedProvider是其提供的一个用于模拟GraphQL请求和响应的工具。通过MockedProvider，我们可以在测试环境中模拟GraphQL的请求和响应，以便进行单元测试或集成测试。
动态模拟是指根据不同的测试场景，动态地模拟不同的请求和响应。在故事书中，我们可以通过编写不同的故事（stories）来模拟不同的场景。每个故事可以包含一个或多个组件，每个组件可以使用MockedProvider来模拟GraphQL请求和响应。
在动态模拟中，我们可以使用MockedProvider的mocks属性来定义模拟的请求和响应。mocks属性是一个数组，每个元素表示一个模拟的请求和响应。我们可以根据需要定义多个模拟，每个模拟可以包含不同的请求和响应。
在每个模拟中，我们可以使用MockedProvider的addMockedResponse方法来添加模拟的响应。addMockedResponse方法接受一个响应对象作为参数，该对象包含了模拟的请求和响应的相关信息，例如请求的查询、变量和响应的数据。
通过动态模拟，我们可以根据不同的测试场景，模拟不同的请求和响应，以验证组件在不同情况下的行为和渲染结果。这对于开发工程师来说是非常有用的，可以帮助他们进行单元测试和集成测试，提高代码的质量和可靠性。
推荐的腾讯云相关产品：腾讯云云开发（Tencent Cloud CloudBase），它是一款全托管的云原生应用开发平台，提供了丰富的后端服务和开发工具，可以帮助开发者快速构建和部署云原生应用。腾讯云云开发支持多种编程语言和开发框架，提供了丰富的云端能力，包括数据库、存储、函数计算等，可以满足开发者在云计算领域的各种需求。
腾讯云云开发产品介绍链接地址：https://cloud.tencent.com/product/tcb
相关·内容
在我的React故事书中，我希望能够玩弄使用graphQL查询和突变的组件(用阿波罗实现)。 使用MockedProvider可以很好地工作，只要我预先指定了确切的突变，包括它们的输入。 我想知道是否可以/如何不预先指定输入，以接受任何输入。 export const MyComponent = () => (
<Mutation mutation={gql`some mutation`}>
{(doMutation, { loading, error, data }) => (
<Button onClick={()=>
浏览 13提问于2019-06-05得票数 12
1回答
模拟阿波罗链接状态
、、、、
我试图模拟查询@client，但我没有得到。
我正确地模拟了来自graphql服务器的查询，并且它正在工作。
import React from 'react';
import renderer from 'react-test-renderer';
import wait from 'waait';
import ExchangeRates from './ExchangeRates';
import { MockedProvider } from 'react-apollo/test-utils';
impor
浏览 0提问于2018-06-27得票数 1
回答已采纳
我试图以某种方式测试一个使用阿波罗客户端连接条目和GraphQL的钩式文件：
见错误：
无法在"Connect(withRouter(Apollo(Connect(SearchResults))))".的上下文或道具中找到“存储”将根组件包装在"Connect(withRouter(Apollo(Connect(SearchResults))))".中，或者显式地将“存储”作为支柱传递给
的测试文件：
我可以澄清的一个信息是，模拟组件，在本例中，我从由react本身建议的模型中获取它。
import React from 'react'
imp
浏览 2提问于2021-06-11得票数 0
回答已采纳
1回答
我正在测试一个react组件，它有一个更新布尔值字段的简单Material-ui开关。当我在本地运行应用程序时，该组件可以正常工作。 在我的测试中，我通过MockedProvider模拟了graphql调用。模拟的提供程序按预期工作，我可以看到初始响应和更新响应到达并更新状态。但是，当我找到开关并在屏幕上选中它时，它保持未选中状态。我的测试失败了，原因是： Received element is checked: <input checked="" class="PrivateSwitchBase-input-40 MuiSwitch-input" na
浏览 16提问于2021-09-07得票数 1
我把我的<MockedProvider />设置在mocks={mocks}上。一切正常一切都很好。
问题是，我有一个表单，每当它的任何部分被编辑时，它就会产生一个突变，它返回一个响应并更新总数。比如说，数量变了，突变量从1增加到2。总价应该加倍。
问题是，在单元测试和模拟提供者中，您只测试道具和硬编码响应中的功能。这不是个恰当的测试。也许这更像是e2e/集成测试，但我想知道在这种情况下，您是否可以使用MockedProvider进行更好的测试？
浏览 7提问于2022-03-10得票数 1
我需要些帮助。我是阿波罗客户反应变量的新手。有一个组件，其中消息的显示取决于来自本地状态的值的变量(阿波罗缓存)。在测试将不同值传递给该变量的组件时，如何模拟阿波罗缓存？
Message.tsx
const Message: FC = ({ children }) => {
const message = useReactiveVar(messageVar);
return (
<>
{!!message && (
<Alert>
<Typography className={
浏览 0提问于2021-03-23得票数 6
我正在使用阿波罗钩子(useQuery，useMutation)对反应组件进行单元测试，在测试中我使用阿波罗的MockedProvider模拟实际的查询。问题是，有时，我的模拟与组件实际进行的查询不匹配(或者创建模拟时输入错误，或者组件演化和更改一些查询变量)。当发生这种情况时，MockedProvided会向组件返回一个NetworkError。但是，在测试套件中，不显示警告。这是令人沮丧的，因为有时我的组件不处理useQuery返回的错误。这是因为我的考试，过去是通过的，突然默默地失败了，给了我一个很难找到原因的时间。
这是一个使用useQuery的组件示例：
import React f
浏览 9提问于2020-02-06得票数 10
回答已采纳
我正在开发一个使用Storybook模拟组件的React项目。我们最近引入了Apollo react钩子(即useQuery)来获取一些组件的数据。示例： const Component = () => {
const { loading, error, data } = useQuery(GET_THING);
if (loading) return 'Loading!';
if (!loading && error) return 'Error!';
return <ComponentChild data={da
浏览 23提问于2020-04-10得票数 1
在2018腾讯云云+未来峰会上介绍了腾讯云如何助力加速物联网+，提供了“高性能、低门槛”的一站式开发管理平台IoT开发平台，将如何解决目前的互联网开发中遇到的问题？涉及哪些技术支撑？
浏览 1825提问于2018-06-04
1回答
在测试之间清除阿波罗缓存
、、、、
我有一个组件，我正在尝试测试，但似乎阿波罗的缓存没有在测试之间被清除。我用的是React测试库和Jest。
下面是我的几个测试，它们测试不同的情况：
it('shows a "show more" button when there is `hasNextPage` is true', async () => {
render(
<MemoryRouter initialEntries={['/media/1']}>
<MockedProvider mocks={[getCharacterMock,
浏览 2提问于2021-10-12得票数 0
我正在经历最奇怪的阿波罗行为…在我的测试中，每当我发出一个模拟的查询时，阿波罗神奇地找不到它。
我有5个模拟，包括基于collectionId和一些分页变量的查询。当测试中的组件查找ID 834940时，我得到以下内容：
Expected variables: {"page":1,"perPage":20,"collectionId":834940}
Failed to match 4 mocks for this query, which had the following variables:
{"collectionId
浏览 5提问于2022-08-05得票数 1
回答已采纳
1回答
Apollo客户端提供了用于使用MockedProvider测试API的，但它似乎没有模拟useApolloClient钩子。当我将MockedProvider与我的功能组件一起使用并运行测试时，即使我在挂载时添加了MockedProvider，也会出现此错误：
Invariant Violation: No Apollo Client instance can be found. Please ensure that you have called `ApolloProvider` higher up in your tree.
72 | );
73 |
浏览 4提问于2021-10-03得票数 0
1回答
我有一个小的React/TypeScript/GraphQL应用程序，它连接到API，获取产品，并在页面上显示它们。
我正在尝试通过使用GraphQL创建一个测试，检查产品的名称是否在getByText模拟之后出现在文档中，但是我一直在获取TestingLibraryElementError: Unable to find an element with the text: iPad 5g. This could be because the text is broken up by multiple elements. In this case, you can provide a func
浏览 4提问于2021-11-27得票数 0
回答已采纳
我正在测试一个使用graphql useLazyQuery的组件。MockProvider由阿波罗推荐库@ Apollo /react-react提供。我想根据查询返回的数据长度来测试是否呈现了某条消息。我有这样的html元素结构：
<div className="message" data-id={props.data ? props.data.specials.length > 0 ? 'valid' : 'invalid' : ''}>
...children
</div>
我通读了阿波
浏览 0提问于2020-06-01得票数 1
1回答
我正在尝试使用React和阿波罗图形to创建一个单元测试，但是我一直得到这个错误：
Watch Usage: Press w to show more. console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:104
Warning: An update to ThemeHandler inside a test was not wrapped in act(...).
When testing, code that causes React state up
浏览 0提问于2019-08-13得票数 2
回答已采纳
下面是我如何使用MockedProvider的方法。如何模拟重取模拟数组？
const mocks = [{
request: {
query: GET_USERS_BY_FACILITY,
variables: {
facility: 300
}
},
result: {
data: {
GetUsersByFacility: [{
nuId: &
浏览 3提问于2019-11-21得票数 4
1回答
我有一个带有表单的组件。onSubmit表单使用阿波罗useLazyQuery根据表单值检索数据。
在组件中，表单由React处理，因此，handleSubmit由RHF控制。
<FormContainer onSubmit={handleSubmit(collectFormData)} noValidate name='LoginForm'>
其中collectFormData发送GraphQL请求，如下所示。
const collectFormData: SubmitHandler<FormInput> = (formData) => {
浏览 11提问于2022-11-03得票数 0
问题：是否有一种方法来模拟某些GraphQL类型/查询/突变/订阅，同时将其余的“转发”到现有的GraphQL服务器？
场景：应用程序有一个模式，其中一部分已经在服务器上实现，其余的还有待开发。在前端工作有时会产生对后端团队的依赖，我正试图解决这个问题。
目标设置：问题中的设置应该将所有请求“转发”到现有的GraphQL服务器，但我想要模拟的请求除外。因此，对于已经在服务器上实现的部件(例如，user auth )，使用的是实际服务器，而对于尚未在服务器上实现的部件，我可以使用模拟响应。
我已经尝试过搜索，虽然我找到了创建模拟GraphQL服务器的方法，但找不到这样的方法。
我愿意编写一些代码
浏览 15提问于2017-12-30得票数 1
我正在尝试对我的函数进行单元测试，该函数从@阿波罗/客户端调用useQuery。
以下是我所做的
getPixelID.ts
import { useQuery } from '@apollo/client';
import { GET_PIXEL_ID } from '../query';
export const GetPixelID = (brandId:string) => {
const { data } = useQuery(GET_PIXEL_ID, {
variables: {
input: {
b
浏览 5提问于2022-02-25得票数 2
1回答
或
当查询在子组件中使用时，如何在Storybook中模拟阿波罗/图形is查询？
我试图在童话中呈现一个nextJS页面组件。该页面组件的子组件正在使用GraphQL查询。我不知道这是否有效，但是当我在页面组件的故事中嘲笑这个(子的)查询时，我可以在Storybook屏幕底部的控制台类信息部分看到模拟的值。
但我发现了一个错误：
Uncaught Error: No more mocked responses for the query: query GetSidebarInfos($clientId: ID!, $walletId: ID!) {
client(id: $clientId
浏览 2提问于2021-08-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
