{"id":15384120,"url":"https://github.com/theashraf/react-tdd-starter","last_synced_at":"2026-01-07T16:02:52.952Z","repository":{"id":37968151,"uuid":"210633494","full_name":"theashraf/react-tdd-starter","owner":"theashraf","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-07T10:02:47.000Z","size":1017,"stargazers_count":0,"open_issues_count":16,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T00:51:19.334Z","etag":null,"topics":["react","react-boilerplate","react-starter"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/theashraf.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}},"created_at":"2019-09-24T15:14:06.000Z","updated_at":"2020-01-13T03:14:22.000Z","dependencies_parsed_at":"2023-02-06T21:02:25.718Z","dependency_job_id":null,"html_url":"https://github.com/theashraf/react-tdd-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theashraf%2Freact-tdd-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theashraf%2Freact-tdd-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theashraf%2Freact-tdd-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theashraf%2Freact-tdd-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theashraf","download_url":"https://codeload.github.com/theashraf/react-tdd-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245937929,"owners_count":20696987,"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":["react","react-boilerplate","react-starter"],"created_at":"2024-10-01T14:40:40.151Z","updated_at":"2026-01-07T16:02:52.865Z","avatar_url":"https://github.com/theashraf.png","language":"JavaScript","readme":"# React TDD Starter\n\n![](https://github.com/theashraf/react-starter/workflows/CI/badge.svg)\n\n## What is TDD?\n\nTest-Driven Development (TDD) is an approach to automated software testing that involves writing a failing test before writing the production code to make it pass. TDD helps you develop a robust test suite to catch bugs, as well as guiding you to more modular, flexible code.\n\nTDD approaches:\n\n- Middle-Out Testing: an approach to testing that begins with domain objects and works from there out to user-facing code.\n- Outside-in Testing: an approach to testing that begins with the outside of the system, i.e. with acceptance tests, and then writes isolation tests as needed to specify classes needed to satisfy the acceptance test.\n\n## Outside-in Steps\n\nTODO:\n\n## Why Outside-in?\n\n1. Confidence it works. Unit or component tests are great to specify the functionality of functions or classes, but the app can still crash or do the wrong thing when they’re connected together. An end-to-end test confirms that all the pieces connect in the right way.\n\n2. 100% test coverage. By only writing the minimal code necessary to pass each error, this ensures we don’t have any code that isn’t covered by a test. This avoids the situation where a change we make breaks untested code.\n\n3. Minimal code. We build the minimal features that pass our test. This help us avoid to speculate on features the code might need in the future, that increase our maintenance cost without adding any benefit.\n\n4. Ability to refactor. Because we have 100% test coverage, we can make changes to our code to improve its design to handle future requirements. Our code doesn’t develop cruft that makes it complex to work within.\n\n5. Ability to ship quickly. We aren’t spending time building code our users don’t need. When some old code is slowing us down, we can refactor it to make it quicker to work with. And our tests reduce the amount of manual testing we need to do before a release.\n\n## Features\n\n- [x] test setup\n- [x] hot reload\n- [x] code formatting\n- [x] static code analysis using eslint\n- [x] ~~travis starter config file~~ github CI workflow config\n- [x] vaildate staged files on precommit hook\n- [x] lint commit messages on commit hooks\n\n## Available Scripts\n\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.\u003cbr\u003e\nYou will also see any lint errors in the console.\n\n### `npm test`\n\nruns unit and e2e tests\u003cbr\u003e\n\n### `npm run test:unit:watch`\n\nruns unit tests in watch mode\n\n### `npm run test:unit`\n\nruns unit tests\n\n### `npm run test:e2e`\n\nruns e2e testing using cypress\n\n### `npm run test:cy:open`\n\nopens cypress\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!.\n\n### `npm run lint`\n\nlints js and jsx files.\n\n### `npm run commit`\n\nprompts you to fill out any required commit fields at commit time. No more waiting until later for a git commit hook to run and reject your commit.\n\n### `npm run format`\n\nformats .js|jsx|json|md|yml files.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheashraf%2Freact-tdd-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheashraf%2Freact-tdd-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheashraf%2Freact-tdd-starter/lists"}