我想测试一个通过HOC消耗3个查询的React组件。第三查询的变量是根据第一查询返回的数据设置的。第三个查询显示加载状态，但不返回数据。
我在第三个查询上使用了跳过配置，以防止它在第一个查询完成加载数据之前一直运行。如果我不使用skip并将变量设置为恒定值，则一切正常。当我使用skip时，它向我显示从第一个查询获取数据后，第三个查询的loading = true，但它不会加载数据。下面给出示例代码。这里withIgnoreQuery依赖于withSelectedQuery：
const withSelectedQuery = graphql(HOME_SCREEN_QUERY, {
name: 'selectedQueryData',
options: ownProps => {
return { variables: { screenId: '1' } }
},
props: ({ selectedQueryData, ownProps }) => {
return { selectedQueryData, ...ownProps }
}
})
const withIgnoreQuery = graphql(GET_IGNORE_LIST_QUERY, {
name: 'ignoreListData',
options: ownProps => {
if (
!!ownProps.selectedQueryData &&
!!ownProps.selectedQueryData.userdata
) {
return {
variables: {
id: '4e3d44c1-ec50-40c3-8783-1983a905a8a9'
}
}
}
},
props: ({ ignoreListData, ownProps }) => {
return { ignoreListData, ...ownProps }
},
skip: props => {
return !!props.selectedQueryData &&
!!props.selectedQueryData.userdata
? false
: true
}
})
const withListQuery = graphql(INITIALSTATE_QUERY, {
name: 'listData',
options: ownProps => {
return {
variables: {
id: '2534e504-fd44-4513-915c-2037b7f71a42'
}
}
},
props: ({ listData, ownProps }) => {
return { listData, ...ownProps }
}
})
class testingInner extends Component {
render() {
let loading, error
const {
ignoreListData,
listData,
selectedQueryData
} = this.props
if (!!selectedQueryData) {
;({ loading, error } = selectedQueryData)
if (loading) {
return 'Loading..'
}
if (error) {
return `Error! ${error.message}`
}
}
if (!!ignoreListData) {
;({ loading, error } = ignoreListData)
if (loading) {
return 'Loading..'
}
if (error) {
return `Error! ${error.message}`
}
}
if (!!listData) {
;({ loading, error } = listData)
if (loading) {
return 'Loading..'
}
if (error) {
return `Error! ${error.message}`
}
}
return <span>reached here</span>
}
}
const TestingComp = compose(
withSelectedQuery,
withListQuery,
withIgnoreQuery
)(testingInner)
const mock = [
{
request: {
query: HOME_SCREEN_QUERY,
variables: {
screenId: '1'
}
},
result: () => {
return {
data: {
homeScreen: {
id: '1',
__typename: 'HomeScreenType',
selectedProductFamily: {
__typename: 'SelectedFamilyType',
id: '2534e504-fd44-4513-915c-2037b7f71a42'
}
},
userdata: {
__typename: 'UserDataType',
id: '2',
firm: {
__typename: 'FirmType',
id: '4e3d44c1-ec50-40c3-8783-1983a905a8a9'
}
}
}
}
}
},
{
request: {
query: GET_IGNORE_LIST_QUERY,
variables: {
id: '4e3d44c1-ec50-40c3-8783-1983a905a8a9'
}
},
result: () => {
return {
data: {
firm: {
id: '4e3d44c1-ec50-40c3-8783-1983a905a8a9',
__typename: 'FirmType',
checklistIgnoreLists: [
{
id: '8319bdf5-f5f0-4e1b-9381-9f47a6cbe11d',
__typename: 'ChecklistIgnoreListType',
ignoredValues: [
'item1',
'item2'
],
name: 'IGNORE LIST'
}
]
}
}
}
}
},
{
request: {
query: INITIALSTATE_QUERY,
variables: {
id: '2534e504-fd44-4513-915c-2037b7f71a42'
}
},
result: () => {
return {
data: {
productFamily: {
id: '2534e504-fd44-4513-915c-2037b7f71a42',
__typename: 'ProductFamilyType',
checklistPreview: {
__typename: 'ItemPreviewType',
checklistTags: [
{
__typename: 'ItemTagType',
sourceObjectType: 'ItemType',
sourceObjectId: 'e9cbd2ba-c1a9-4052-b23e-9bc8a1e626b1',
contentItemId: 'fde9fbd9-33c3-47d0-a262-3d9a08b88eb0',
optionItemId: null,
isTextIgnored: false,
text: 'GENERAL',
children: [
{
__typename: 'ItemTagType',
sourceObjectType: 'ItemType',
sourceObjectId:
'de66a6a0-8873-4e51-a629-2bb309b215ef',
contentItemId: 'c2474b19-ea8c-406c-ae6f-957a51a4bc10',
optionItemId: null,
isTextIgnored: false,
text: 'item1',
children: []
}
]
}
]
}
}
}
}
}
}
]
const wrapper = renderer.create(
<MockedProvider
mocks={mock}
addTypename={false}>
<TestingComp />
</MockedProvider>
)
await wait(0)
expect(wrapper.toJSON().children).toContain('Loading')