问题描述
我要做什么?
使用MockProvider
中的@apollo/client/testing
来模拟查询的错误状态。
我期望得到什么?
该组件使用useLazyQuery
从后端查询某些内容,并返回一个error
,这将触发该组件呈现错误消息。
组件正在按预期方式工作。
我实际上能得到什么?
我尝试了什么?
- 最终状态正在按预期运行。我尝试删除了模拟数据中的错误状态,一切正常。
- 我试图等待更长的时间,但没有帮助
- 我尝试将错误记录在组件中,我可以看到错误。看起来MockProvider缺少了一些东西,甚至在渲染组件之前就出错了。
- 我试图删除
data
部分,或将其重新添加到模拟中。参见下面的代码
您的代码在哪里?
尝试#1
const mock = {
request: { query: GET_REFERRER_FROM_CODE,variables: { input: "edx" } },result: {
errors: [new GraphQLError("Error!")],data: {
userGetReferrerFromCode: {
id: "abc",firstName: "Leo",lastName: "Qiu",},};
尝试#2
const mock = {
request: { query: GET_REFERRER_FROM_CODE,};
基本代码
<MockedProvider addTypename={false} mocks={mocks}>
...
</MockedProvider>
解决方法
根据经验,我发现错误字段无需嵌套在结果中即可触发错误。
例如
const mocks = [
{
request: { query: GET_REFERRER_FROM_CODE,variables: { input: "edx" } },error: {
message: "Something went wrong",},}
];
然后在使用时
const { loading,data,error } = useQuery(GET_REFERRER_FROM_CODE,{
variables: { input: "edx" },});
error
将包含模拟对象。