Recommended Free Tools
This is a legacy setup guide for adding Cypress end-to-end (E2E) tests written in TypeScript to an existing Create React App (CRA) v3 project. The matching walkthrough was published on May 13, 2019; its folder layout and TypeScript helper workflow belong to that toolchain, not a current recommended starter setup. Cypress now says CRA is no longer actively maintained or supported, though that does not prevent you from maintaining an existing CRA app. See the Cypress migration guide before choosing this path for a new project.
What this setup does—and what it does not
The steps below follow the historical CRA v3 E2E workflow: create or use a TypeScript CRA app, run it locally, install Cypress, scaffold its test folders, and configure TypeScript for Cypress specs. The 2019 tutorial uses cypress/integration, cypress/plugins, cypress/support, and a root cypress.json. Cypress conventions have changed over time, so verify folder and configuration requirements against the version you install.
As an Amazon Associate I earn from qualifying purchases.
This is not Cypress component testing. An E2E spec visits the running application in a browser; component testing mounts components through a configured development server. The current Cypress configuration reference discusses modern configuration, including component testing. Do not substitute its component-testing setup for the legacy E2E workflow described here.
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 minuteCreate and run the TypeScript CRA app
If you are reproducing the historical setup, create the app with the TypeScript option, then start it and confirm it runs before adding Cypress. The 2019 tutorial uses:
#1 Best Overall
npx create-react-app my-app --typescript
cd my-app
npm startCRA v3 is an older toolchain. If the command no longer produces that version in your environment, use an existing CRA v3 project or a project setup that preserves the intended versions; do not assume that running the command today recreates the tutorial’s 2019 dependencies. For a new application, prefer a framework that is actively maintained and supported.
Install Cypress and scaffold the legacy folders
In the app directory, the historical tutorial installs Cypress as a development dependency, opens it to create its initial files, and uses a scaffolding utility to establish the legacy folder structure and example integration spec:
npm install --save-dev cypress
npx cypress openThe tutorial’s resulting structure includes:
cypress.jsonfor Cypress configuration in that generation;cypress/integrationfor E2E specs;cypress/pluginsandcypress/supportfor related setup code.
These names are historical. Keep the layout expected by the Cypress version actually installed rather than copying old filenames into a newer project without checking its documentation.
Free tools Windows power users keep installed
One-click scans. No signup required.
Add TypeScript support to Cypress specs
The 2019 workflow adds @bahmutov/add-typescript-to-cypress and Webpack, then renames the example integration spec from .js to .ts. Its central issue is CRA’s root TypeScript configuration: CRA sets noEmit: true, while the helper-based Cypress setup described by the tutorial needs a Cypress-specific configuration that overrides it.
In that historical arrangement, cypress/tsconfig.json extends the root config, includes Cypress definitions and Cypress test files, and sets noEmit to false. Conceptually, it isolates Cypress’s TypeScript compilation settings from the app’s settings:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"noEmit": false
},
"include": [
"../node_modules/@types",
"./**/*.ts"
]
}This illustrates the configuration relationship, not a universal drop-in file: the exact include paths and helper setup depend on the tutorial-era package versions. Use the full setup in the 2019 walkthrough only when reproducing that environment.
Follow current Cypress TypeScript guidance for newer installs
Current Cypress documentation says Cypress ships its own TypeScript declarations and recommends a Cypress-specific tsconfig.json inside the Cypress directory, including Cypress and Node types. Its minimum TypeScript requirements are newer than those of the legacy helper-based setup. Consult Cypress TypeScript support for requirements matching your installed Cypress version.
Do not blindly combine the 2019 helper-and-Webpack workflow with current Cypress TypeScript configuration. Choose one coherent version-specific approach: reproduce the old helper workflow to maintain or study a matching CRA v3 project, or follow current Cypress documentation for the Cypress version in your project. A separate Cypress tsconfig also helps keep Cypress globals from colliding with another test runner’s types.
Write and run an E2E spec
The historical tutorial’s example visits the locally running app and checks that a “Learn React” link is visible. A comparable spec in its legacy integration folder would look like this:
describe('CRA home page', () => {
it('shows the Learn React link', () => {
cy.visit('http://localhost:3000');
cy.contains('a', 'Learn React').should('be.visible');
});
});Start the React development server in one terminal, then run Cypress in another using the script or command appropriate to the installed version. The essential E2E condition is that the app is reachable at the URL used by cy.visit(); this example does not configure component testing.
Troubleshooting the historical workflow
TypeScript emits files or conflicts with CRA settings
Check that Cypress is using its own tsconfig and that the historical helper workflow overrides the inherited CRA noEmit: true setting as intended. If you are on a newer Cypress release, use its current TypeScript instructions instead of assuming the old override remains appropriate.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsCypress cannot find the test or configuration
Confirm that your spec extension and directory match the conventions for the installed Cypress version. The 2019 example uses .ts files in cypress/integration; those legacy paths may not match newer defaults.
Best Value
CRA reports a dependency-tree warning
The 2019 article reported the message “There might be a problem with the project dependency tree,” including a babel-loader version mismatch. It suggested adding SKIP_PREFLIGHT_CHECK=true to a root .env file. Treat that as a workaround reported for the historical setup, not a general fix: first inspect the actual package versions and dependency graph in your project. The available guidance does not establish that suppressing the check is appropriate for a current dependency conflict.
The browser opens but the visit fails
Make sure the app server is still running and the URL and port in cy.visit() match it. A spec cannot reach an application that has not started or is listening elsewhere.
Browser-based setup alternative: ScreenshotNeo
For capturing the app’s rendered page as an image or PDF rather than asserting behavior in a Cypress E2E test, ScreenshotNeo provides a website screenshot API and MCP server. It does not replace Cypress tests or validate application behavior; it is an alternative when the task is to obtain a page capture.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Quick Recap
Or skip the browser setup:
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. It accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be disabled. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, with response headers indicating page verdict and billing. An MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 shots. Sign up free for 1,000 screenshots a month, with no card required.
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.
