MockedProvider
has a very strict matching behaviour: your query variables and the mock variables
must match EXACTLY, including keys with the value undefined
.
It makes tests very bristle and leads to the dreaded No more mocked responses for the query:
error.
This package uses a lighter approach, mocks are matched only based on the operationName
.
Limitation: this might be problematic if a component is triggering multiple queries with the same operationName
.
But it is fine in most scenarios.
import {
OperationNameMockedResponse,
OperationNameMockLink
} from "operation-name-mock-link";
interface GetSomeDataResult {
getSomeData: {
id: string;
}
}
const mock: OperationNameMockedResponse<GetSomeDataResult> = {
request: {
operationName: "myQuery",
query: gql`
query myQuery {
getSomeData {
id
}
}`
},
result: {
data: {
getSomeData: {
id: "42"
}
}
}
};
const wrapper = ({ children }) => (
<MockedProvider
// We replace MockedProvider default link with our custom MockLink
link={new OperationNameMockLink([mock], false)}
>
{children}
</MockedProvider>
);