我已经尝试了所有在线发布的建议,但仍然找不到错误的根本原因。我在网上可以找到的所有示例都是非常简单的示例。
我有一个组件,该组件发送一些查询以获取数据以预填充几个下拉列表和一个表,然后用户可以单击Delete / Update按钮与数据进行交互。我在render()中使用。在真正的环境中可以正常工作,但我无法通过单元测试。
package.json
"react-apollo": "^2.5.6",
"graphql": "^14.3.1",
"graphql-tag": "^2.10.1",
MyComponentClass
import gql from 'graphql-tag';
export class ...
constructor(props) {
super(props);
....
this.state = {
platformSelectedValue: 'Web',
productSelectedValue: null,
widgetSelectedValue: 1,
trackingSelectedValue: 1,
};
render() {
return (
<Container>
<Query
// fetchPolicy="no-cache" //to force refetch
query={GET_ALL_INITIAL_DATA}
variables={{
platform: this.state.platformSelectedValue,
widget: {
id: this.state.widgetSelectedValue,
},
}}
>
{({ loading, error, data }) => {
if (loading) return <div>Still loading</div>;
if (error) return <div>Error! {error.message}</div>;
const productMenuItem = data.getProducts.map((product) => (
<MenuItem key={product.id} value={product.id}>
{product.scope}
</MenuItem>
));
const widgetMenuItem = data.getWidgets.map((widget) => (
<MenuItem key={widget.id} value={widget.id}>
{widget.name}
</MenuItem>
));
return (
<Content>
<FilterWrapper>
<Dropdown
label="Product"
aria-label="Product"
id="product"
value={this.state.productSelectedValue}
onChange={(e) => this.updateProductValue(e)}
>
{productMenuItem}
</Dropdown>
查询:
const EVENT_FRAGMENT = gql`
fragment eventInfo on Event {
name
platform
}
`;
//GET_PRODUCTS, GET_WIDGETS, and GET_TRACKING_PLANS are just simple queries that I pulled from another file. I have verified all these queries are working on both local and end-to-end env
export const GET_ALL_INITIAL_DATA = gql`
query($widget: EventSenderInput, $platform: Platform) {
getProducts: ${GET_PRODUCTS}
getWidgets: ${GET_WIDGETS}
getTrackingPlans: ${GET_TRACKING_PLANS}
getEvents: events(
eventSender: $widget
product: null
trackingPlan: null
platform: $platform) {
...eventInfo
id
properties {
id
isRequired
propertyTemplate {
name
eventTypes
}
}
schema
eventType
lifecycleState
}
}
${EVENT_FRAGMENT}
`;
在单元测试中:
import { myComponent, GET_ALL_INITIAL_DATA } from 'pathToMyComponentClass';
test('testing render state without any error', async () => {
console.log('test(testing render state without any error, async () => {');
const mockInitialGraphQL = [{
request: {
query: GET_ALL_INITIAL_DATA,
variables: {
platform: 'Web',
widget: {
id: 1,
},
},
},
result: {
data: mockInitialData,
},
},];
const component = renderer.create(
<MockedProvider mocks={mockInitialGraphQL} addTypename={false} cache={new InMemoryCache()}>
<ViewEvents {...props} />
</MockedProvider>,
);
await wait(0);
const tree = component.toJSON();
console.log(tree.children[1]);
});
这就是我在控制台中看到的
{ type: 'div',
props: {},
children:
[ 'Error! ',
'Network error: No more mocked responses for the query: query ($widget: EventSenderInput, $platform: Platform) {\n getProducts: products {\n id\n scope\n __typename\n }\n getWidgets: eventSenders {\n id\n name\n purpose\n __typename\n }\n getTrackingPlans: trackingPlans {\n id\n name\n purpose\n __typename\n }\n getEvents: events(eventSender: $widget, product: null, trackingPlan: null, platform: $platform) {\n ...eventInfo\n id\n properties {\n id\n isRequired\n propertyTemplate {\n name\n eventTypes\n __typename\n }\n __typename\n }\n schema\n eventType\n lifecycleState\n __typename\n }\n}\n\nfragment eventInfo on Event {\n name\n platform\n __typename\n}\n, variables: {"platform":"Web","widget":{"id":1}}' ] }
它永远不会到达render()的返回部分,因为它总是在错误div =(