T
TanStack•3y ago
foreign-sapphire

Can't get testing library tests to work

Hi, I seem unable to get any tests to work where I test a component with useQuery. I looked at how useQuery itself does the tests but even that didn't help. My pages have a loading prompt and tests always fail because no matter how long my timeout is, screen always contains that prompt rather than actual data. This is what one such test looks like: https://github.com/Makistos/suomisf-ui/blob/master/src/features/publisher/routes/publisher-page.test.js This page takes less than a second to load in the browser. And here is the function I copied from useStack: https://github.com/Makistos/suomisf-ui/blob/master/src/testing/render-with-client.tsx What am I missing here? I had tests working for these components before useQuery so I know they work with test library.
GitHub
suomisf-ui/publisher-page.test.js at master · Makistos/suomisf-ui
React UI for Suomisf website. Backend is in the suomisf repository. - suomisf-ui/publisher-page.test.js at master · Makistos/suomisf-ui
GitHub
suomisf-ui/render-with-client.tsx at master · Makistos/suomisf-ui
React UI for Suomisf website. Backend is in the suomisf repository. - suomisf-ui/render-with-client.tsx at master · Makistos/suomisf-ui
4 Replies
adverse-sapphire
adverse-sapphire•3y ago
how did you mock the api layer? Have you seen my blog post about testing react query ? https://tkdodo.eu/blog/testing-react-query it also links to a repo at the end where tests work. Feel free to fork it and try it out
Testing React Query
Let's take a look at how to efficiently test custom useQuery hooks and components using them.
foreign-sapphire
foreign-sapphireOP•3y ago
Yes, I have read and reread your blog 🙂 I didn't mock it, rather get a known entity from the actual API. I think I first tried to do it like in your blog (minus mocking). I want to write not only unit tests but some sort of integration tests at the same time to save time (no-one is paying me for this...). So do I read this correctly: I either use useQuery or write integration tests, but not both?
adverse-sapphire
adverse-sapphire•3y ago
no?
foreign-sapphire
foreign-sapphireOP•3y ago
I'm trying to copy how you do it in your GitHub repo and I get either 
 useHref() may be used only in the context of a <Router> component.
 useHref() may be used only in the context of a <Router> component.
Or in some cases still not rendering past the loading screen. Also, oddly enough VSC says that those excpet(await result...) "await has no effect on this type of expression". Heck, seems like I finally got at least one of the tests to work. Had to wrap component inside a Router like this: 
    const history = createMemoryHistory();
    const result = renderWithClient(
        <Router navigator={history} location="/">
          <WorkPage id={1} />
        </Router>
    );
    const history = createMemoryHistory();
    const result = renderWithClient(
        <Router navigator={history} location="/">
          <WorkPage id={1} />
        </Router>
    );
A few cases still fail because of that await thingy. I think it's because they have a function inside useEffect that include an async/await themselves? Some components render so quickly this doesn't matter. Ah, had to do them with waitFor wrapper. All sorted now.

Did you find this page helpful?