I am reading over the docs for testing React/Apollo components Link. If the component has one query, it seems pretty simple to test it.
const mocks = [
{
request: {
query: GET_DOG_QUERY,
variables: {
name: 'Buck',
},
},
result: {
data: {
dog: { id: '1', name: 'Buck', breed: 'bulldog' },
},
},
},
];
it('renders without error', () => {
renderer.create(
<MockedProvider mocks={mocks} addTypename={false}>
<Dog name="Buck" />
</MockedProvider>,
);
});
My component is a little different than the one provided in the documentation.
- It doesn't use the
useQuery
hook, instead I am opting for the HOC approach as outlined here. - I have two queries that my function uses, and so I use two
graphql
functions and combine them together usingcompose
, as recommended in the docs.
My component is exported like this:
export default compose(withQueryA, withQueryB)(MyComponent);
const withQueryA = graphql(QUERY_A, {
name: "QueryA",
options: (props) => ({
variables: {
foo: props.foo,
},
}),
});
const withQueryB = graphql(QUERY_B, {
name: "QueryB ",
options: (props) => ({
variables: {
bar: props.bar,
},
}),
});
What I'm trying to do is provide the mocks
object with multiple objects, each containing a request
/result
for the corresponding query. I just wanted to know if anyone has been testing their components in a similar way or if there is a better suggestion.
const mocks = [
{
request: {
query: QUERY_A,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
{
request: {
query: QUERY_B,
variables: {
foo: "bar",
},
},
result: {
data: {
...,
},
},
},
];
I'm also confused about what to put in the result
object. When I console.log
what is actually returned to the component when making a query in production, it has the data plus error
, fetchMore
, loading
, networkStatus
. Do I have to put all those things in the mocks as well?
Aucun commentaire:
Enregistrer un commentaire