question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Jest/Testing-Library with RTK-query, msw fails to reset handlers when testing for error case after success case.

See original GitHub issue

Prerequisites

Environment check

  • I’m using the latest msw version
  • I’m using Node.js version 14 or higher

Node.js version

v16.13.1

Reproduction repository

https://github.com/ymoon715/rtk-query-msw

Reproduction steps

clone the repo at https://github.com/ymoon715/rtk-query-msw

npm i
npm run test

Current behavior

I have my tests to reset the handlers after every test. I ran into an error when testing for both success and error cases. If i test error case FIRST, then success SECOND, it all passes.

However, if i test success case FIRST, then error case SECOND, error case fails.

I am using server.use() to test both success and error cases. I have 4 different test files to showcase that testing error case first THEN the success case always works, where as testing success case first THEN the error case always fails

Expected behavior

server.resetHandlers() to successfully reset the handlers, or for us to be able to test for error case after successful cases.

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
SaltedCaramelCoffeecommented, Oct 19, 2022

I was running into the same issue when fetching data using SWR. My issue was I was fetching data with the same key, so the first request’s response is cached, and was returned to me in subsequent test runs.

I was able to resolve my issue by providing a clean SWR provider at every render like this:

<SWRConfig value={{ provider: () => new Map() }}>
  { children }
</SWRConfig>

From what I can see in the RTK docs, looks like RTK does something similar and caches response data based on some key. You might be able to solve your problem if you figure out how to invalidate cache and re-fetch for each test case even if you’re using the same key.

0reactions
Jucian0commented, Sep 29, 2022

For me the problem was that React Query by default retry when a request fails, so, I disabled that in tests, @ymoon715, probably RTK works in the same way.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Testing with Jest while using MSW and RTK Query leads to ...
The problem I have is that I am testing two different scenarios in one test suite, one is a successful login and one...
Read more >
How to test RTK Query with react testing library
Testing components with a request in rtk-query using msw and ... This is the solution to clear RTK Query cache after each test...
Read more >
How to clear RTK Query cache in tests between requests ...
I'm using Redux Toolkit and RTK Query in my create-react-app project and writing tests using React Testing Library with MSW for mocking.
Read more >
Error Handling | Redux Toolkit
RTK Query > Usage > Error Handling: dealing with API errors. ... need to access the error or success payload immediately after a...
Read more >
React Testing Tutorial - 47 - MSW Error Handling - YouTube
Sign up for free here - https://studio.harperdb.io/sign-up?utm_source=codevolution2022 Courses - https://learn.codevolution.dev/ Support ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found