{"id":15552368,"url":"https://github.com/bahmutov/try-cra-app-typescript","last_synced_at":"2025-09-28T20:31:10.888Z","repository":{"id":37032981,"uuid":"252739935","full_name":"bahmutov/try-cra-app-typescript","owner":"bahmutov","description":"An example of Create-React-App v3 using TypeScript with Cypress unit tests","archived":false,"fork":false,"pushed_at":"2024-09-28T07:01:13.000Z","size":2833,"stargazers_count":6,"open_issues_count":7,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-03T14:17:33.575Z","etag":null,"topics":["cypress-react-unit-test-example"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2020-04-03T13:27:28.000Z","updated_at":"2021-12-16T17:14:49.000Z","dependencies_parsed_at":"2023-01-20T11:36:21.296Z","dependency_job_id":"4e046c66-523a-4d5c-af1c-bd6f56bdab39","html_url":"https://github.com/bahmutov/try-cra-app-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftry-cra-app-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftry-cra-app-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftry-cra-app-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Ftry-cra-app-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/try-cra-app-typescript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234558807,"owners_count":18852283,"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","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":["cypress-react-unit-test-example"],"created_at":"2024-10-02T14:17:44.650Z","updated_at":"2025-09-28T20:31:05.310Z","avatar_url":"https://github.com/bahmutov.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# try-cra-app-typescript\n[![ci status][ci image]][ci url] ![cypress version](https://img.shields.io/badge/cypress-6.1.0-brightgreen) ![@cypress/react version](https://img.shields.io/badge/@cypress/react-4.16.4-brightgreen) ![check-code-coverage](https://img.shields.io/badge/code--coverage-100%25-brightgreen)\n\nThis project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app) using TypeScript template\n\n```shell\n$ npx create-react-app try-cra-app-typescript --template typescript\ninfo Direct dependencies\n├─ cra-template-typescript@1.0.3\n├─ react-dom@16.13.1\n├─ react-scripts@3.4.1\n└─ react@16.13.1\n```\n\nThen add Cypress and [cypress-react-unit-test](https://github.com/bahmutov/cypress-react-unit-test)\n\n```shell\n$ yarn add -D cypress cypress-react-unit-test\ninfo Direct dependencies\n├─ cypress-react-unit-test@3.0.1\n└─ cypress@4.3.0\n```\n\nCreate [cypress.json](cypress.json) and point at the unit testing settings: support and plugins to read the create-react-app webpack config and load tests from [src](src) folder.\n\nCreate [src/App.cy-spec.tsx](src/App.cy-spec.tsx). Run using `yarn cypress open` and you should see the working component test.\n\n![Working unit test](images/works.png)\n\nThe test vs the original [React Testing Library](https://testing-library.com/docs/react-testing-library/intro) test file (nothing like type clashes between Mocha and Jest assertions, right)\n\n![Code](images/initial-code.png)\n\n## Code coverage\n\nThe component tests collect code coverage automatically. You should see messages in the command log.\n\n![Code coverage messages](images/messages.png)\n\nWhen running on CI, the collected coverage information is checked using [check-code-coverage](https://github.com/bahmutov/check-code-coverage) utility. If the code coverage is not being collected, run Cypress with environment variable to see logs:\n\n```\nDEBUG=cypress-react-unit-test,find-webpack\n```\n\n[ci image]: https://github.com/bahmutov/try-cra-app-typescript/workflows/master/badge.svg?branch=master\n[ci url]: https://github.com/bahmutov/try-cra-app-typescript/actions\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Ftry-cra-app-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Ftry-cra-app-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Ftry-cra-app-typescript/lists"}