Hey Leigh!, first of all I just want to say, I love how your videos! You explain things very throughly and in relatable ways. I will defiantly recommend your videos to my team as we are starting to adopt lots of hooks, and Apollo GraphQL tooling, a hard part about these adoptions is figuring out how to test them, look like you have 90% of the bases covered, and thank you for that! I am in a legacy Angular app we are converting to React with Hooks and GraphQL. A part of the incremental adoption requirement is to figure out how to use Apollo GraphQL on a component basis until we are 100% React and are able to add a ApolloProvider. I am trying to use UseQuery with the client passed in as an option. Made a custom hook with it pre-imported so you dont have to worry about it jus import the hook, pass query and consume! A pleasure to work with, but I am having a lot of trouble testing via MockProvider. I figured it would work since its mocking the same values being passed into UseQuery. But when I try to test the same exact way you are testing it in this video I get errors saying I need to wrap my render with the `act()` function. From what I understand react-testing-library already has this wrapper implemented, so I am not sure what is causing this error. Is there any chance you can show me an example or test you have in place for a UseQuery hook, is it any different, or is it cause I am passing in the client as an option to the hook? I am royally stuck, would be so appreciate if you could at least point me in the right direction. thank you in advance, Justin
Hmmmm... been researching this to see if I could help you, but I'm not really sure if I'm honest! It says here that react-testing-library comes with an act function, but I didn't see that it is automatic... maybe that is mentioned elsewhere. testing-library.com/docs/react-testing-library/api#act I know with hooks, this one specifically, it causes your component to re-render because it typically is in a loading state, and then re-renders once the data is available. Did you try wrapping act around your code to see if it helps? Also, you wrote this a few days ago... any luck solving this? Would love to find out! It's hard to come with my own example because it sounds like you have a fairly custom setup that you're dealing with due to the Angular conversion. Thank you so much for writing and watching :)
Hi Leigh, thanks a lot for your great tutorial, I am getting into react testing library along with MockedProvider. Could you please tell me, how do you console your errors, in case some field is missing or is misspelled in your mocks, as in your video 15:57 ? Did you configure anything extra or installed some kind of library? Thanks a lot in advance.
Hey dalezio1! Thank you very much. I actually don't think I did use anything extra to get those console warning messages... the finished code I use in this demo is located here if you want to take a look: github.com/leighhalliday/apollo-generating-types/
The findByText fixed my failing tests. Thank you!!
Hey Leigh!, first of all I just want to say, I love how your videos! You explain things very throughly and in relatable ways. I will defiantly recommend your videos to my team as we are starting to adopt lots of hooks, and Apollo GraphQL tooling, a hard part about these adoptions is figuring out how to test them, look like you have 90% of the bases covered, and thank you for that!
I am in a legacy Angular app we are converting to React with Hooks and GraphQL. A part of the incremental adoption requirement is to figure out how to use Apollo GraphQL on a component basis until we are 100% React and are able to add a ApolloProvider. I am trying to use UseQuery with the client passed in as an option. Made a custom hook with it pre-imported so you dont have to worry about it jus import the hook, pass query and consume! A pleasure to work with, but I am having a lot of trouble testing via MockProvider. I figured it would work since its mocking the same values being passed into UseQuery. But when I try to test the same exact way you are testing it in this video I get errors saying I need to wrap my render with the `act()` function.
From what I understand react-testing-library already has this wrapper implemented, so I am not sure what is causing this error. Is there any chance you can show me an example or test you have in place for a UseQuery hook, is it any different, or is it cause I am passing in the client as an option to the hook? I am royally stuck, would be so appreciate if you could at least point me in the right direction.
thank you in advance,
Justin
Hmmmm... been researching this to see if I could help you, but I'm not really sure if I'm honest! It says here that react-testing-library comes with an act function, but I didn't see that it is automatic... maybe that is mentioned elsewhere. testing-library.com/docs/react-testing-library/api#act
I know with hooks, this one specifically, it causes your component to re-render because it typically is in a loading state, and then re-renders once the data is available. Did you try wrapping act around your code to see if it helps?
Also, you wrote this a few days ago... any luck solving this? Would love to find out! It's hard to come with my own example because it sounds like you have a fairly custom setup that you're dealing with due to the Angular conversion.
Thank you so much for writing and watching :)
You're killing it with these videos Leigh, thanks! They are super helpful.
Thanks you Chris :D I appreciate it!
You have a great teaching style!
Great explanation!
Thank you Daniel!
great stuff
Thanks Szymon, I appreciate the support!
Hi Leigh, thanks a lot for your great tutorial, I am getting into react testing library along with MockedProvider. Could you please tell me, how do you console your errors, in case some field is missing or is misspelled in your mocks, as in your video 15:57 ? Did you configure anything extra or installed some kind of library? Thanks a lot in advance.
Hey dalezio1! Thank you very much. I actually don't think I did use anything extra to get those console warning messages... the finished code I use in this demo is located here if you want to take a look: github.com/leighhalliday/apollo-generating-types/