{"id":13519005,"url":"https://github.com/zpratt/react-tdd-guide","last_synced_at":"2025-04-04T22:08:20.966Z","repository":{"id":30658308,"uuid":"34213990","full_name":"zpratt/react-tdd-guide","owner":"zpratt","description":"A series of examples on how to TDD React","archived":false,"fork":false,"pushed_at":"2023-01-07T07:53:20.000Z","size":585,"stargazers_count":594,"open_issues_count":6,"forks_count":34,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-03-28T21:07:57.446Z","etag":null,"topics":["guide","howto","javascript","jest","react","tdd","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/zpratt.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}},"created_at":"2015-04-19T16:17:19.000Z","updated_at":"2025-03-03T20:47:30.000Z","dependencies_parsed_at":"2023-01-14T17:24:56.558Z","dependency_job_id":null,"html_url":"https://github.com/zpratt/react-tdd-guide","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/zpratt%2Freact-tdd-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zpratt%2Freact-tdd-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zpratt%2Freact-tdd-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zpratt%2Freact-tdd-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zpratt","download_url":"https://codeload.github.com/zpratt/react-tdd-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256112,"owners_count":20909240,"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":["guide","howto","javascript","jest","react","tdd","tutorial"],"created_at":"2024-08-01T05:01:52.042Z","updated_at":"2025-04-04T22:08:20.951Z","avatar_url":"https://github.com/zpratt.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","TDD IN JAVASCRIPT","React.js"],"sub_categories":["ReactJS","Guides React"],"readme":"# react-tdd-guide\nA series of examples on how to TDD React\n\n## Getting started\n\n1. install [nvm](https://github.com/creationix/nvm)\n- Grab an editor or IDE. I recommend Webstorm, Atom, and VIM, in that order.\n- `git clone` ...\n- `nvm install 4` OR if v4 of node.js is installed, `nvm use`\n- `npm i`\n\n## How to use this guide\n\nEach section is broken out into its own folder, starting with [basics](https://github.com/zpratt/react-tdd-guide/tree/master/basics). What you'll find there is the finished example. I am experimenting with using the [commit history](https://github.com/zpratt/react-tdd-guide/commits/master/basics) and comments to drive the guide itself. Feedback on whether this works or not would be appreciated.\n\nEach commit that is suffixed with **\"- red\"** can be checked out separately to examine the failing test. Each commit that is suffixed with **\"- green\"** shows how I finally passed the failing assertion.\n\nLooking at the history for each section will show you only the steps needed to drive that part of the application.\n\n## Philosophy\n\n* Avoid the need for runners and browsers\n  * Achieved by using jest and [react-testing-library](https://testing-library.com/docs/react-testing-library/intro)\n\n## Table of Contents\n\n* [Basics](https://github.com/zpratt/react-tdd-guide/commits/master/basics) - Steps for TDD'ing the simplest of React components: An unordered list of items. Start here if you're not familiar with TDD'ing React and want to see a simple introduction.\n  * [Running version](http://zpratt.github.io/react-tdd-guide/examples/basics/)\n* [Simple event handling](https://github.com/zpratt/react-tdd-guide/commits/master/event-handling) (WIP)\n* [Simple stateful input](https://github.com/zpratt/react-tdd-guide/commits/master/state)\n* Centralized state management techniques (not done)\n* Redux (not done)\n* React router (not done)\n\n## Running the tests for a section\n\n* `npm run \u003csection name\u003e`\n\n## Running all tests\n\n* `npm test`\n\n## Contributing\n\nPlease feel free to open an issue for:\n\n* A question on how to do something\n* A request for further clarification\n\nUse a pull request for\n\n* Suggestions on changing how something is tested\n* To add an example you think would be valuable\n\n## Caveats\n\nI am not a windows user, therefore this has only been tested on OSX.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzpratt%2Freact-tdd-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzpratt%2Freact-tdd-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzpratt%2Freact-tdd-guide/lists"}