{"id":31829550,"url":"https://github.com/itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup","last_synced_at":"2025-10-11T20:28:41.183Z","repository":{"id":66237588,"uuid":"402052284","full_name":"itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup","owner":"itsdevdom","description":"Running unit \u0026 integration tests with Cypress in a TypeScript React project based on create-react-app.","archived":false,"fork":false,"pushed_at":"2021-09-01T17:23:31.000Z","size":241,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-09T00:51:54.290Z","etag":null,"topics":["code-coverage","componen-testing","create-react-app","ct","cypress","integration-test","react","runner","test","testing-library","typescript","unit-test","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itsdevdom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-01T12:26:50.000Z","updated_at":"2023-03-09T03:19:31.000Z","dependencies_parsed_at":"2023-02-20T16:46:03.903Z","dependency_job_id":null,"html_url":"https://github.com/itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup","commit_stats":null,"previous_names":["itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itsdevdom","download_url":"https://codeload.github.com/itsdevdom/create-react-app-typescript-cypress-unit-integration-tests-setup/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279008616,"owners_count":26084480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-11T02:00:06.511Z","response_time":55,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-coverage","componen-testing","create-react-app","ct","cypress","integration-test","react","runner","test","testing-library","typescript","unit-test","webpack"],"created_at":"2025-10-11T20:28:37.722Z","updated_at":"2025-10-11T20:28:41.176Z","avatar_url":"https://github.com/itsdevdom.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n\n# create-react-app-typescript-cypress-unit-integration-tests-setup\n\nRunning unit \u0026 integration tests with **[Cypress](https://docs.cypress.io/guides/component-testing/introduction)** in a\n**[TypeScript](https://github.com/microsoft/TypeScript)** **[React](https://github.com/facebook/react)** project based on\n**[create-react-app](https://github.com/facebook/create-react-app)**.\n\n\u003c/div\u003e\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## How to setup Cypress for unit \u0026 integration tests\n\nThis project is an example React application that uses\n**[Cypress Component Testing](https://docs.cypress.io/guides/component-testing/introduction)** for the organization, writing and execution\nof unit / integration tests. You can clone it and play around with it (see **[Commands](#commands)**). The following sub-chapters explain\nhow to setup Cypress Component Testing in a `create-react-app` project, including code coverage output and support for the\n**[Testing Library](https://testing-library.com/docs/cypress-testing-library/intro)**.\n\n\u003cbr\u003e\n\n### 1. Update dependencies\n\nFirst of all, we need a few new dependencies. In particular:\n\n- Cypress itself (`cypress`)\n- Compatibility with Create React App (`@cypress/react`, `@cypress/webpack-dev-server`, `html-webpack-plugin`)\n- Support for code coverage (`@cypress/code-coverage`, `@cypress/instrument-cra`)\n\nAdd all those dependencies to your `package.json` file, remove all Jest-related dependencies, and re-install them. For example:\n\n```diff\n  {\n    \"devDependencies\": {\n-     \"@testing-library/jest-dom\": \"5.14.x\",\n-     \"@testing-library/react\": \"12.0.x\",\n-     \"@testing-library/user-event\": \"13.2.x\",\n-     \"@types/jest\": \"26.0.x\",\n+     \"@cypress/code-coverage\": \"3.9.x\",\n+     \"@cypress/instrument-cra\": \"1.4.x\",\n+     \"@cypress/react\": \"5.9.x\",\n+     \"@cypress/webpack-dev-server\": \"1.5.x\",\n+     \"cypress\": \"8.3.x\",\n+     \"html-webpack-plugin\": \"4.5.x\",\n    }\n  }\n```\n\n\u003cbr\u003e\n\n### 2. Remove Jest setup\n\nYou might find an ESLint configuration in your `package.json` file. If so, remove any Jest-related options from it. For example:\n\n```diff\n  \"eslintConfig\": {\n    \"extends\": [\n      \"react-app\",\n-     \"react-app/jest\"\n    ]\n  },\n```\n\nIn addition, the `setupTests.ts` file within the `src` folder is also no longer required and can be deleted. For example:\n\n```diff\n- // jest-dom adds custom jest matchers for asserting on DOM nodes.\n- // allows you to do things like:\n- // expect(element).toHaveTextContent(/react/i)\n- // learn more: https://github.com/testing-library/jest-dom\n- import '@testing-library/jest-dom';\n```\n\n\u003cbr\u003e\n\n### 3. Setup Cypress\n\n#### 3.1 Update scripts\n\nFirst, let's change our test scripts to use Cypress instead of Jest. Within the root folder, update your `package.json` file:\n\n```diff\n  {\n    \"scripts\": {\n-     \"test\": \"react-scripts test\",\n+     \"test\": \"cypress run-ct\"\n+     \"test:runner\": \"cypress open-ct\"\n    }\n  }\n```\n\nIn detail:\n\n- The `test` script executes all tests in headless mode - optimal for CI systems\n- The `test:runner` script opens up the Cypress Test Runner and let's you choose specific tests to run - perfect for local development and\n  debugging\n\n\u003e Note: Watching test files and re-executing tests only works with the `test:runner` script, and is enabeld by default\n\u003e (**[cypress#3665](https://github.com/cypress-io/cypress/issues/3665)**).\n\n#### 3.2 Configure TypeScript\n\nNow, we want to enable type safety \u0026 type support for our Cypress tests. Within the root folder, extend your `tsconfig.json` file:\n\n```diff\n  {\n    \"compilerOptions\": {\n+     \"types\": [\"cypress\"]\n    }\n  }\n```\n\n#### 3.3 Configure Cypress\n\nFirst, we need to do some basic Cypress configuration, such as where to find unit / integration tests or how to run them.\n\nWithin the root folder, create a file named `cypress.json` and add the following content:\n\n```diff\n+ {\n+   \"testFiles\": \"**/*.test.{ts,tsx}\",\n+   \"componentFolder\": \"src\",\n+   \"video\": false\n+ }\n```\n\nThen, we need to configure Cypress to use the same dev server (Webpack) configuration that Create React App uses, and also to collect and\nsave code coverage.\n\nWithin the folder `cypress/plugins`, create a file named `index.ts` and add the following content:\n\n```diff\n+ /// \u003creference types=\"cypress\" /\u003e\n+\n+ import injectDevServer from '@cypress/react/plugins/react-scripts';\n+ import installCoverageTask from '@cypress/code-coverage/task';\n+ import '@cypress/instrument-cra';\n+\n+ const pluginConfig: Cypress.PluginConfig = (on, config) =\u003e {\n+   if (config.testingType === 'component') {\n+     injectDevServer(on, config);\n+   }\n+   installCoverageTask(on, config);\n+   return config;\n+ };\n+\n+ export default pluginConfig;\n```\n\nWithin the folder `cypress/support`, create a file named `index.ts` and add the following content:\n\n```diff\n+ /// \u003creference types=\"cypress\" /\u003e\n+\n+ import '@cypress/code-coverage/support'\n```\n\n#### 3.4 Extend gitignore\n\nCypress has its own directory structure and output formats. Within your root folder, extend the `.gitignore` to exclude them:\n\n```diff\n  # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n  # dependencies\n  /node_modules\n  /.pnp\n  .pnp.js\n\n  # testing\n  /coverage\n+ /.nyc_output\n+ cypress/results/*\n+ cypress/reports/*\n+ cypress/screenshots/*\n+ cypress/videos/*\n\n  # production\n  /build\n\n  # misc\n  .DS_Store\n  .env.local\n  .env.development.local\n  .env.test.local\n  .env.production.local\n\n  npm-debug.log*\n  yarn-debug.log*\n  yarn-error.log*\n```\n\n\u003cbr\u003e\n\n### 4. Rewrite tests (unit / integration)\n\nMounting test setups and asserting expectations works similarly between Cypress and Jest, but uses a different syntax. For example, the\n`App.test.tsx` requires the following changes:\n\n```diff\n- import { render, screen } from '@testing-library/react';\n+ import { mount } from '@cypress/react'\n  import App from './App';\n\n- test('renders learn react link', () =\u003e {\n+ it('renders learn react link', () =\u003e {\n-   render(\u003cApp /\u003e);\n+   mount(\u003cApp \u003e);\n\n-   const linkElement = screen.getByText(/learn react/i);\n+   cy.get('a').should('exist');\n  });\n```\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Bonus: How to use the **[Testing Library](https://testing-library.com/docs/cypress-testing-library/intro)**\n\nThe **[Testing Library](https://testing-library.com/)** is very popuplar within the React community, and these days is also available for\nvarious other frameworks and libraries - amongst them Cypress. The following sub-chapters explain how to set it all up.\n\n\u003cbr\u003e\n\n### 1. Install dependencies\n\nAdd the dependency to your `package.json` file and install it. For example:\n\n```diff\n  {\n    \"devDependencies\": {\n+     \"@testing-library/cypress\": \"8.0.x\",\n    }\n  }\n```\n\n\u003cbr\u003e\n\n### 2. Configure Cypress\n\n#### 2.1 Configure TypeScript\n\nWithin the root folder, extend your `tsconfig.json` file:\n\n```diff\n  {\n    \"compilerOptions\": {\n-     \"types\": [\"cypress\"]\n+     \"types\": [\"cypress\", \"@testing-library/cypress\"]\n    }\n  }\n```\n\n#### 2.2. Configure Cypress\n\nWithin the folder `cypress/support`, open the `index.ts` file and add Testing Library commands:\n\n```diff\n  /// \u003creference types=\"cypress\" /\u003e\n\n  import '@cypress/code-coverage/support'\n+ import '@testing-library/cypress/add-commands';\n```\n\n\u003cbr\u003e\n\n### 3. Rewrite tests (unit \u0026 integration)\n\nYou can now switch from the Cypress queries to Testing Library ones. For example, the `App.test.tsx` can now be changed the following way:\n\n```diff\n  import { screen } from '@testing-library/react';\n  import { mount } from '@cypress/react'\n  import App from './App';\n\n  it('renders learn react link', () =\u003e {\n    mount(\u003cApp \u003e);\n\n-   cy.get('a').should('exist');\n+   cy.findByText(/learn react/i).should('exist');\n  });\n```\n\n\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n## Commands\n\nThe following commands are available:\n\n| Command               | Description                                                       | CI                 |\n| --------------------- | ----------------------------------------------------------------- | ------------------ |\n| `npm start`           | Creates a development build, running in watch mode                |                    |\n| `npm run build`       | Creates a production build                                        | :heavy_check_mark: |\n| `npm run test`        | Executes all unit tests                                           | :heavy_check_mark: |\n| `npm run test:runner` | Opens the test runner, allowing for specific unit test executions |                    |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsdevdom%2Fcreate-react-app-typescript-cypress-unit-integration-tests-setup/lists"}