问题描述
我有一个使用Apollo Boost MockedProvider，Jest和React Testing Library的工作测试，当我将返回的字段更改为graphQL fragment时，它将停止工作。我想念什么？
TicketGql.js
export default class TicketGql {
static VIEW_FRAGMENT = gql`
fragment ViewFragment on View {
viewId
versionId
name
description
orderedColumns {
columnId
name
descriptions {
translationId
lang
description
}
}
}
`;
static GET_TICKET_VIEW = gql`
query getView($viewId: ID!) {
view(viewId: $viewId) {
viewId
versionId
name
description
orderedColumns {
columnId
name
descriptions {
translationId
lang
description
}
}
}
}
`;
}
TicketGql.test.js
...
it('GET_TICKET_VIEW',async () => {
const currentLang = uniqid('lang_');
const viewMock = {
viewId: uniqid('viewId_'),versionId: uniqid('versionId_'),name: uniqid('name_'),description: uniqid('description_'),orderedColumns: [],};
_.times(_.random(1,5),(columnIndex) => {
viewMock.orderedColumns.push({
columnId: uniqid('columnId_'),name: uniqid('columnId_'),descriptions: [],});
_.times(
_.random(1,3),(descIndex) => viewMock.orderedColumns[columnIndex].descriptions.push({
translationId: uniqid('translationId_'),lang: descIndex === 0 ? currentLang : uniqid('lang_'),}),);
});
const variables = { viewId: viewMock.viewId };
const mocks = [
{
request: {
query: TicketGql.GET_TICKET_VIEW,variables,},result: {
data: {
view: viewMock,];
const TicketViewColumns = () => {
const { data,loading,error } = useQuery(TicketGql.GET_TICKET_VIEW,{
variables,});
return (
<div>
{error}
<ul>
{
loading
? 'loading...'
: (
data.view.orderedColumns.map((column) => (
<li key={column.columnId}>
{column.descriptions.find((d) => d.lang === currentLang).description}
</li>
))
)
}
</ul>
</div>
);
};
render(
<MockedProvider mocks={mocks} addTypename={false}>
<TicketViewColumns />
</MockedProvider>,);
await waitFor(() => expect(screen.queryAllByRole('listitem'))
.toHaveLength(viewMock.orderedColumns.length));
);
...
此测试按原样进行。但是，当我将GET_TICKET_VIEW更改为此...
static GET_TICKET_VIEW = gql`
query getView($viewId: ID!) {
view(viewId: $viewId) {
...ViewFragment
}
}
${TicketGql.VIEW_FRAGMENT}
`;
...它只是停止工作。 MockedProvide返回data === { view: {} }而不是viewMock中提供的数据，由于data.view.orderedColumns.map为data.view.orderedColumns，在undefined上引起错误。我对此突变使用了另一个测试片段，它可以正常工作。
编辑：
package.json
"dependencies": {
"@apollo/react-hooks": "^4.0.0","apollo-boost": "^0.4.9","graphql": "^15.0.0",...
}
"devDependencies": {
"@apollo/client": "^3.1.1","@testing-library/jest-dom": "^5.8.0","@testing-library/react": "^10.0.4",...
}
解决方法
使用片段时，只需将name1 name2 foo
-----------------
"jkl" "def" "a"
"def" "pqr" "b"
... ... ...
添加到模拟对象中即可。
不含碎片/联合的简单查询不是必需的，但如果有的话，则是必需的。