Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallIf a Cypress stub is not intercepting an RTK Query request, check the failure in this order: mount the component with a Redux store that includes the API reducer and middleware; register cy.intercept() before mounting or triggering the query; match the request’s actual method and URL; return the response shape the endpoint expects; then wait for the aliased request before asserting on the UI. If the route never matches, confirm the endpoint actually sends browser HTTP rather than using a custom transport or returning cached data.
Start with a fresh Redux store and the real component
Cypress Component Testing mounts a React component in a browser testbed. If the component calls an RTK Query hook, the mount must provide the Redux context that hook expects. A network stub does not create a store, register the API reducer, or install its middleware.
Include both the API slice reducer and middleware in the configured store. Create a new store for each test rather than reusing a module-level store: RTK Query keeps query state and cached results in Redux, so shared state can cause a later test to reuse data or start from an unexpected state. Cypress’s React examples show Redux-backed mounting and advise initializing a fresh store for each test (Cypress React component testing examples).
A reusable mount helper
For example, if the API slice is exported as api, a project can define a mount helper that creates its store when invoked:
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import { mount } from 'cypress/react'
import { api } from '../../src/services/api'
export function mountWithStore(component) {
const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
})
return mount(<Provider store={store}>{component}</Provider>)
}Adapt the imports, any additional reducers, and the component-testing support-file setup to your application. If the component needs other providers, include them in this helper too. Keep the store creation inside the helper or test setup that runs per test; a store constructed once when the support file loads is shared state.
Use the helper in the spec
Here is the general pattern. Replace the example endpoint path and response with the exact request and data contract used by your API slice:
import { mountWithStore } from '../support/mountWithStore'
import { Profile } from '../../src/components/Profile'
describe('Profile', () => {
it('shows the profile returned by the API', () => {
cy.intercept('GET', '**/api/profile/42', {
statusCode: 200,
body: { id: 42, name: 'Ada Lovelace' },
}).as('getProfile')
mountWithStore(<Profile userId="42" />)
cy.wait('@getProfile')
cy.contains('Ada Lovelace').should('be.visible')
})
})This example assumes the endpoint returns an object with the fields the component renders. It is not a universal RTK Query response fixture: use your endpoint’s actual contract, including any envelope or transformation it expects.
Register the intercept before the query can run
Define the intercept before mounting a component that starts its query on render, and before any click or other action that triggers a lazy query or mutation. Otherwise, the request can leave before the route exists and cy.wait('@alias') will have nothing to wait for.
Recommended Free Tools
Cypress’s cy.intercept() can observe or stub front-end requests, and route aliases let a test wait for matching traffic. Cypress also documents that intercepts are cleared automatically before every test (Cypress cy.intercept() documentation). Define each test’s needed route in that test rather than relying on a route registered in a previous test.
Match the request, not your guess about it
RTK Query endpoints commonly build a request from an endpoint definition and a shared baseQuery. The resulting URL may include a base path, an identifier, encoded parameters, or a query string. Match the HTTP method and the URL the browser actually requests. A route that matches /profile will not necessarily match /api/profile/42.
- Check whether the request is
GET,POST, or another method. - Check the full URL, including the configured base URL and any path prefix.
- Check whether query parameters are present and whether the route pattern accounts for them.
- Check that the hook is actually called: a skipped query, missing required argument, or action that never occurred means no request to intercept.
When a broad route pattern helps diagnose a mismatch, use it temporarily to confirm that the browser made a request, then narrow the matcher so the test stubs only the intended endpoint.
Return the data shape the endpoint and component expect
An intercept can match and return HTTP 200 while the component still renders an error or empty state. The response body must agree with the endpoint’s expected data. For example, if the server normally returns {"user":{"id":42,"name":"Ada Lovelace"}}, a fixture containing {"id":42,"name":"Ada Lovelace"} is not equivalent unless the endpoint transforms one shape into the other.
RTK Query endpoints can transform a response before caching it. Check the endpoint’s query and transformResponse, then compare the fixture with the value the hook receives. RTK Query queries fetch and cache results in the client (Redux Toolkit: RTK Query queries); a cached value or transformation can therefore affect what the component displays even when the stub itself looks plausible.
Keep status and body meaningful
For a success-state test, return the status and body the endpoint considers successful. For an error-state test, deliberately return an error status and the error payload your UI handles. Avoid using one fixture for both cases if the component distinguishes loading, success, empty, and error states.
Wait for the request, then assert on visible behavior
Use cy.wait('@getProfile') after the request-triggering mount or action to verify that the route matched and completed. Then assert on the user-facing result with Cypress’s retryable assertions, such as cy.contains('Ada Lovelace').should('be.visible'). Do not treat an immediate DOM check after mounting as proof that the query has completed: mounting is asynchronous, and the request and React render may still be in progress.
Waiting on an alias answers an important diagnostic question. If the wait times out, the route did not observe the expected request; investigate timing, route matching, whether the query ran, and whether the endpoint uses browser HTTP. If the wait succeeds but the UI is wrong, focus on the response contract, endpoint transformation, component state handling, or assertion target.
Diagnose a route that never matches
Check for browser cache
A response served from the browser cache does not pass through Cypress’s network interception layer, so an intercept may not see it. If the behavior differs between a warm and fresh test run, inspect whether caching is involved and ensure the test environment causes the request to reach the network layer you intend to observe.
Check the endpoint’s transport
cy.intercept() sees browser network traffic; it does not automatically replace arbitrary asynchronous work inside application code. RTK Query permits custom queryFn and baseQuery implementations. If one uses a non-browser transport, reads data from another source, or returns a result without making an HTTP request, there is no matching browser request for Cypress to stub. Inspect the endpoint and shared base query to establish whether the expected request is actually made.
Check whether the request starts at all
A hook may be configured to skip, a component may not have rendered the branch that calls it, or a lazy-query trigger may not have run. In these cases, the intercept is not necessarily misconfigured: the application has not sent the request. Verify the component inputs and triggering action before changing the URL matcher.
Use Cypress interception or shared MSW handlers?
For a Cypress component test that should exercise the real RTK Query hook and Redux integration, Cypress interception is a direct mock seam: it observes and stubs the browser request made by the component. It is scoped to Cypress’s browser traffic and is a good fit when the request itself is part of what you want to verify.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Redux’s component integration testing guidance also demonstrates Mock Service Worker (MSW) handlers (Redux: Writing Tests). MSW may be a better fit when a team wants reusable request handlers across multiple test environments. It is not required just because the application uses RTK Query, and it does not remove the need for correct store setup or a valid response shape.
| Choice | Useful when | What it does not replace |
|---|---|---|
cy.intercept() |
You want to stub or observe requests from the Cypress-mounted browser app. | Redux provider/store setup, accurate endpoint matching, and a valid fixture. |
| MSW handlers | You want request handlers reusable across test environments, as in the Redux testing guidance. | Correct RTK Query integration and the endpoint’s expected data contract. |
Troubleshooting by symptom
| Symptom | Likely check | Action |
|---|---|---|
| Component errors about missing context or store | Mount helper and Redux store setup. | Provide a Redux store with the API reducer and middleware, and create a fresh store for each test. |
cy.wait('@request') times out |
Intercept timing, method or URL mismatch, a query that never ran, browser cache, or a non-HTTP endpoint transport. | Register the intercept before mount or action; inspect the actual browser request; confirm the endpoint uses browser HTTP. |
| The intercept matches, but the UI shows an error or no data | Fixture shape, status, response transformation, or assertion timing. | Compare the fixture with the endpoint’s expected response and wait for the aliased response before asserting. |
| A test passes alone but fails in the suite | Shared Redux store or query-cache state leaking between tests. | Create a new store per test and avoid reusing test state. |
A custom baseQuery throws unexpectedly |
The custom implementation may not convert a thrown error into RTK Query’s result format. | Catch errors and return { error }; a successful custom base query returns { data }, as described in the RTK Query custom queries guidance. |
Or skip the browser setup
If you need a website screenshot rather than a Cypress component test, ScreenshotNeo provides a screenshot API and MCP server. A Cypress intercept is for stubbing your app’s browser requests; it is not a screenshot service. ScreenshotNeo’s one-call API example is:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; those steps can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. Its MCP server gives AI agents tools for screenshots, page information, and PDF capture. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.
Create a free ScreenshotNeo account to try 1,000 screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Keep version-specific Cypress behavior in view
Cypress’s cy.intercept() documentation records version-specific changes. If an option or matching behavior differs from examples you find, check the documentation against the Cypress version installed in your project rather than assuming every current option exists in older releases. The React examples page reports an update date of August 24, 2026; project configuration and installed versions can still affect which setup applies.
Frequently Asked Questions
Does RTK Query require MSW in Cypress component tests?
No. Cypress interception can stub browser requests directly; MSW is an alternative when shared handlers across test environments are useful.
Why does `cy.wait()` time out even though my endpoint is mocked?
The app may not have issued a browser request, the route may be registered too late or not match the actual method and URL, or a cached or custom-transport result may bypass Cypress interception.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
