Use cy.intercept() to observe or control REST requests initiated by your Vue app; use cy.request() when you want Cypress to call an API endpoint directly. For component tests, install Vuex with a fresh store per mount. For end-to-end confidence, combine repeatable stubbed UI cases with selected app flows that reach a real backend.
Choose the Cypress test layer that matches the question
These approaches cover different boundaries; they are not interchangeable commands. Cypress documents Vue Component Testing for Vue 3 and later. Its current overview gives Vue/Vite and Vue/Webpack combinations, with examples specifying Vite 8.x and Webpack 5+. Check the live Vue component testing overview and your installed versions before copying configuration, because supported setup details can change.
| Test type | What it exercises | Best suited to | Main trade-off |
|---|---|---|---|
| Component test | A mounted component, its plugins and props, and the Vuex store supplied to it | Checking rendering and component interaction in isolation | Does not establish that the whole app or backend works together |
| App end-to-end test with a stub | The application UI path, with a controlled REST response supplied by cy.intercept() |
Repeatable success, empty, validation, and error states | Does not verify that the real server returns the expected response |
| App end-to-end test with a real backend | The app’s browser-originated request and the resulting UI, using the server response | Checking selected integration flows | Needs controlled test data and may be less predictable than a stubbed case |
| Direct API test | An endpoint called directly with cy.request(), without testing a browser-originated app request |
Isolating endpoint behavior and response assertions | Does not exercise Vue rendering, Vuex updates, or app request behavior |
Cypress recommends mixing approaches: keep deterministic stubs for states that are difficult to arrange, and retain appropriate real-server flows for integration confidence. Its Real World App example relies mainly on server responses and uses stubs for selected cases; its data setup includes seeding or test-data factories, but your suite does not have to use that exact strategy.
Set up Vuex with a fresh store for every component test
A component that reads from Vuex must be mounted with the store plugin installed. Avoid a mutable store singleton shared by tests: mutations from one test can affect another. Put store creation inside a factory and call that factory during each mount. Cypress recommends a custom cy.mount() command for this pattern, and the Vue examples support interoperability with Vue Test Utils.
#1 Best Overall
The following is a minimal Vue 3 example. Adapt the store state, selectors, and component import to your app:
// cypress/support/component.js
import { mount } from 'cypress/vue'
import { createStore } from 'vuex'
const getStore = () => createStore({
state: () => ({ count: 0 }),
mutations: {
increment(state) {
state.count += 1
},
},
})
Cypress.Commands.add('mount', (component, options = {}) => {
const store = options.store || getStore()
return mount(component, {
...options,
global: {
...options.global,
plugins: [...(options.global?.plugins || []), store],
},
})
})
declare global {
namespace Cypress {
interface Chainable {
mount: typeof mount
}
}
}
Import the support file from the component support entry configured for your project. A component test can then mount with the default fresh store, or pass a test-specific store when a particular starting state is needed:
import Counter from '../../src/components/Counter.vue'
it('renders the initial Vuex state', () => {
cy.mount(Counter)
cy.contains('0').should('be.visible')
})
it('renders a supplied starting state', () => {
const store = createStore({
state: () => ({ count: 4 }),
mutations: { increment(state) { state.count += 1 } },
})
cy.mount(Counter, { store })
cy.contains('4').should('be.visible')
})
Prefer assertions against rendered DOM for user-visible behavior; Cypress retries assertions while the UI updates. Wrapper-level event inspection can help when the event itself is the subject of the test, but it should not replace checking the behavior a user sees.
Stub or observe a REST request made by the app
Register the intercept before the visit or interaction that triggers the request. Match the method and URL as specifically as practical, give the route an alias, then wait on it before checking the request, response, or resulting UI.
Free tools Windows power users keep installed
One-click scans. No signup required.
beforeEach(() => {
cy.intercept('GET', '/api/items', {
fixture: 'items.json',
}).as('getItems')
})
it('renders items returned by the API', () => {
cy.visit('/')
cy.wait('@getItems')
.its('response.statusCode')
.should('eq', 200)
cy.contains('Example item').should('be.visible')
})
This is an illustrative pattern: substitute your app’s route, response shape, fixture, and selector. The interception object yielded by cy.wait() exposes request and response details for assertions.
Spy on real app traffic without changing the response
If the purpose is to verify what the browser sent while allowing the server to answer, register a spying intercept and wait for its alias. Then assert on the yielded request and on the UI. This verifies that the application made the expected request; the response still depends on the backend and test data.
cy.intercept('POST', '/api/items').as('createItem')
cy.visit('/')
cy.get('[data-cy=new-item]').type('Example item')
cy.get('[data-cy=save]').click()
cy.wait('@createItem').then(({ request, response }) => {
expect(request.body).to.have.property('name', 'Example item')
expect(response.statusCode).to.eq(201)
})
cy.contains('Example item').should('be.visible')
Control a response for repeatable cases
Use a fixture or an inline response to pin the data and status the UI receives. Realistic response shapes matter: the app should still run its actual parsing and Vuex update logic. This is particularly useful for empty lists, validation failures, server errors, or states that are difficult to create reliably on a live service.
cy.intercept('GET', '/api/items', {
statusCode: 500,
body: { message: 'Service unavailable' },
}).as('getItems')
cy.visit('/')
cy.wait('@getItems')
cy.contains('Could not load items').should('be.visible')
A route handler can also inspect or modify a request when the scenario requires more than a fixed response. To test a network failure rather than an HTTP error response, configure the intercept to force a network error and assert the app’s corresponding failure state. Treat these as separate scenarios and assert the behavior each one is intended to cover.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Keep intercept matching and ordering predictable
- When you specify a method, Cypress matches that method; omitting it allows matching across methods. Use a method unless you deliberately want broader matching.
- URL matchers can be exact strings, glob patterns, or regular expressions. Narrow matches help avoid catching unrelated traffic.
- If multiple intercepts match, ordinary routes are processed in reverse definition order. Middleware routes run first.
- Register intercepts in each test or its setup. Cypress clears intercepts before every test.
See Cypress’s intercept command documentation for matcher and route-handler details.
Use cy.request() for direct API tests
cy.request() makes a request directly to an endpoint, which is useful when the test is about the API response itself. It does not reproduce a request initiated by Vue in the browser, and it does not exercise the component’s rendering or Vuex changes.
it('returns the expected item from the API', () => {
cy.request('GET', '/api/items/123').then((response) => {
expect(response.status).to.eq(200)
expect(response.body).to.have.property('id', '123')
})
})
Use your test environment’s real API origin and any required authentication or setup. If the question is whether the app sends the right request, intercept the app traffic with cy.intercept() instead. Cypress documents that intercepts apply to front-end application traffic; a direct cy.request() does not pass through that browser interception path.
Read the Cypress request command documentation for request options and response behavior.
Combine deterministic cases with real-backend coverage
A stubbed app test provides dependable inputs for UI and Vuex behavior. It cannot, on its own, prove that the backend integration is correct. Keep selected flows where the application receives a real server response, and make the test data setup explicit—for example, by using a suitable seed or test-data factory where your environment supports it.
- Use component tests to isolate a component’s display and interactions with a fresh store.
- Use stubbed app tests for hard-to-arrange responses and important UI states.
- Use real-backend app tests for a limited set of representative integration paths.
- Use direct API tests when the endpoint contract is the subject, independently of the UI.
This balance avoids relying on live data for every UI edge case while still testing that important app flows work against the server.
Troubleshoot intercepts and unreliable tests
The intercept never fires
First confirm that the route is registered before the action, and that the method and URL matcher fit the actual request. Inspect the browser’s request details if needed. Also check browser caching: a cached resource does not reach the network layer Cypress intercepts, so the route cannot fire for it. Cypress suggests disabling cache headers in the development server during testing or removing cache headers through an appropriate intercept. Do not assume a missed route is a timing race until you have checked the matcher and cache.
The wait times out
Make sure the test actually triggers the request after registering the route, and that the app is not serving data from a cache or a different endpoint. Check whether the request is made only after a condition, such as a user action or a mounted component lifecycle step. A narrowly chosen method and URL can make mismatches easier to diagnose.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesThe UI is stale or tests affect one another
Create a new Vuex store for each component test or mount. Avoid module-level mutable state shared across tests. In app tests, wait for the relevant aliased request before asserting on UI that depends on its response, and use Cypress’s retryable DOM assertions rather than fixed sleeps where possible.
A passing stubbed test gives false confidence
Check that at least one appropriate app flow reaches the real backend and that its test data is deliberate. A fixture proves how the UI handles that fixture; it does not prove the server returns the same shape or status.
The failure assertion is testing the wrong kind of failure
An HTTP 500 is a response from a server; a forced network error means the request did not receive a normal HTTP response. Model and assert them separately if the application presents different messages or recovery paths.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Performance, reliability, and cost considerations
Component tests keep the exercised boundary small, while app tests cover more integration and require more setup. Stubs make response states repeatable and reduce dependence on server conditions; real-backend flows provide integration evidence but need controlled data and can be affected by backend availability. Direct API tests isolate endpoint behavior, but should not be counted as UI coverage. These are differences in scope and setup, not a claim that one category has a universal runtime.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The Cypress documentation cited here describes setup and test techniques, not a universal pricing figure or a measured speed comparison. For current setup details and configuration, use the official Vue component-testing guide and the network requests guide.
Or skip the browser setup
If your task is to capture a website screenshot rather than test Vuex or verify REST behavior, ScreenshotNeo can return an image or PDF with one GET request. For example, this cURL call saves a WebP screenshot; replace the target URL and provide your API key. See the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000. Sign up for ScreenshotNeo’s free plan.
Frequently Asked Questions
Does a Cypress intercept catch requests made with cy.request()?
No. Use cy.intercept() for browser-originated app traffic; cy.request() calls the endpoint directly.
Windows 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 reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteCan I use Vuex in Cypress component tests?
Yes. Install the store as a Vue plugin when mounting, and use a fresh store for each test.
Does a stubbed end-to-end test prove the REST backend works?
No. It tests the app against the response you supplied; keep selected app flows that reach the real backend for integration coverage.
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.
