javascript - Apollo MockedProvider 未返回预期数据
问题描述
我写了一个叫 apollo 的钩子useQuery
。这很简单:
使用决策者:
import { useState } from 'react';
import { useQuery, gql } from '@apollo/client';
export const GET_DECIDER = gql`
query GetDecider($name: [String]!) {
deciders(names: $name) {
decision
name
value
}
}
`;
export const useDecider = name => {
const [enabled, setEnabled] = useState(false);
useQuery(GET_DECIDER, {
variables: {
name
},
onCompleted: data => {
const decision = data?.deciders[0]?.decision;
setEnabled(decision);
},
onError: error => {
return error;
}
});
return {
enabled
};
};
我现在正在尝试对其进行测试,并且MockedProvider
没有返回预期的数据:
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { MockedProvider } from '@apollo/client/testing';
import { useDecider, GET_DECIDER } from './useDecider';
const getMock = (value = false, decider = '') => [
{
request: {
query: GET_DECIDER,
variables: {
name: decider
}
},
result: () => {
console.log('APOLLO RESULT');
return {
data: {
deciders: [
{
decision: value,
name: decider,
value: 10
}
]
}
};
}
}
];
const FakeComponent = ({ decider }) => {
const { enabled } = useDecider(decider);
return <div>{enabled ? 'isEnabled' : 'isDisabled'}</div>;
};
const WrappedComponent = ({ decider, value }) => (
<MockedProvider mocks={getMock(value, decider)} addTypename={false}>
<FakeComponent decider={decider} />
</MockedProvider>
);
describe('useDecider', () => {
it('when decider returns true', () => {
// should return true
render(<WrappedComponent decider="fake_decider" value={true} />);
screen.debug();
const result = screen.getByText('isEnabled');
expect(result).toBeInTheDocument();
});
});
解决方案
我简化了你的钩子实现并放在一起一个工作示例:
import { useQuery, gql } from "@apollo/client";
export const GET_DECIDER = gql`
query GetDecider($name: [String]!) {
deciders(names: $name) {
decision
name
value
}
}
`;
export const useDecider = (name) => {
const { data } = useQuery(GET_DECIDER, { variables: { name } });
return { enabled: data?.deciders[0]?.decision || false };
};
请注意,在测试中,我还将您更新getBy
为await findBy
:
describe("useDecider", () => {
it("when decider returns true", async () => {
// should return true
render(<WrappedComponent decider="fake_decider" value={true} />);
screen.debug();
const result = await screen.findByText("isEnabled");
expect(result).toBeInTheDocument();
});
});
这是因为您需要等待 API 调用完成,然后数据才会出现在页面上,因此您不会期望数据在第一次呈现时就在那里。
推荐阅读
- excel - MS Excel 根据其他列填充列
- pandas - 在 dask 数据帧中使用 map_partitions 获取目录名称
- reactjs - 在 IIS 中访问另一个路由返回错误
- python - 我在哪里为 Qt 设计器的单个提升 QWidget 编写类
- python - F0321 01:22:08.021044 18633 math_functions.cpp:250] 检查失败:a <= b (0 vs. -1.19209e-07)
- typescript - 从扩展 Typegoose 并包含静态类型特定方法的父类继承
- amazon-web-services - 重新创建 EMR 集群后保持 HDFS 状态
- javascript - AngularJS ng-repeat 不适用于选择选项
- r - 如何确定向量中有多少元素包含来自第二个向量的模式?
- javascript - 使用 Javascript 拦截开发服务器上的链接