Recommended Free Tools
In Cypress Component Testing, inject a dependency as a prop when it is a normal component input; wrap the component in a provider when it expects React context. A reusable cy.mount() command can provide common wrappers and accept test-specific values. Create mutable state such as a Redux store fresh for each test.
Choose props or a provider
| Approach | Use it when | Trade-off |
|---|---|---|
| Pass a dependency as a prop | The dependency is a normal component input, such as data, a callback, or a service function. | Explicit and local, but adds to the component’s public inputs. |
| Wrap with a provider | The component consumes React context or application-level state, such as router context or Redux. | Matches the app’s context and avoids repeating setup, but requires suitable helper options and state isolation. |
There is no need to introduce a dependency-injection container just to test a component. Choose the seam that reflects how the component is designed: props for explicit inputs, providers for context consumers.
Pass a dependency through props
Mount the component with the dependency supplied in JSX. For a callback, use a Cypress spy and assert that the rendered interaction calls it with the expected value.
import { mount } from 'cypress/react'
import { UserCard } from '../../src/UserCard'
describe('UserCard', () => {
it('calls onSelect when selected', () => {
const onSelect = cy.spy().as('onSelect')
mount(<UserCard user={{ id: 'u-1', name: 'Ari' }} onSelect={onSelect} />)
cy.contains('button', 'Select').click()
cy.get('@onSelect').should('have.been.calledWith', 'u-1')
})
})Use the application’s actual component props and interaction labels. If the component normally receives a service function as a prop, provide a focused test implementation or spy the same way; assert the visible result as well as any important call behavior.
#1 Best Overall
Wrap context consumers with a custom mount command
For a component that calls a context hook, mount it beneath the provider it expects. Cypress’s React examples show custom mount commands for recurring wrappers, including Redux and router setup. A shared helper keeps that application-level wiring out of each test.
// cypress/support/component.tsx
import { mount } from 'cypress/react'
import { Provider } from 'react-redux'
import { makeStore } from '../../src/store'
Cypress.Commands.add('mount', (component, options = {}) => {
const { store = makeStore(), ...mountOptions } = options
return mount(<Provider store={store}>{component}</Provider>, mountOptions)
})This is an illustrative pattern, not a drop-in TypeScript definition: adapt the store factory, mount options, and Cypress command typings to the project’s actual types. Register the command in the component support file used by the Cypress configuration. Cypress’s React examples demonstrate provider wrappers and configurable mount helpers; the mount API documents the mount function and options.
Allow a test to supply provider values
Give the helper options for values a test needs to control, such as a prepared Redux store or router props. Destructure the custom options before passing the remaining valid mount options to Cypress. Retain a useful default for common cases, but make overrides explicit so a test can set the exact starting state it needs.
Make mutable state fresh for each test
A Redux store changes as actions run. Create it inside the mount helper for each mount, or create a prepared store inside the individual test and pass it in. Do not reuse one mutable store across tests: state changes in one test can otherwise affect another.
What Cypress Component Testing exercises
cy.mount() renders the component in Cypress’s component-test environment. Component specs and support files are compiled and served through a development server, and the rendered component runs in a browser. This makes the approach useful for UI rendering and browser interactions; a pure dependency factory can still be tested separately as ordinary unit logic. See Cypress’s component test configuration documentation for the dev-server workflow.
Cypress’s React overview, marked last updated August 26, 2026, lists React 18 and 19, with React/Vite, React/Webpack, and Next.js configurations. These are time-sensitive compatibility details: check the current React component testing overview and the versions installed in your project before applying a setup.
Troubleshoot common setup failures
- A context hook reports that its provider is missing: confirm the custom mount command wraps the component with the same provider the application uses, and that the spec calls the registered command.
- TypeScript rejects the custom mount options: type the options to include your provider-specific values and Cypress mount options; remove custom fields before forwarding options to
mount(). Consult the React API reference for the current mount signature and options. - One test starts with another test’s Redux state: create a new store for each test or mount, rather than sharing a mutable module-level store.
- The component spec does not compile or mount: verify that the component support file, framework configuration, and development server are set up for the project’s installed Cypress and bundler versions. The configuration guide describes the supported workflow.
Or skip the browser setup
For capturing a website screenshot rather than testing a React component, ScreenshotNeo offers a one-request screenshot API. It is a different tool for a different task: it does not replace Cypress Component Testing.
Quick Recap
Best Value
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. Cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000.
Free tools Windows power users keep installed
One-click scans. No signup required.
Sign up free for ScreenshotNeo.
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.
