https://github.com/theashraf/react-tdd-starter
https://github.com/theashraf/react-tdd-starter
react react-boilerplate react-starter
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/theashraf/react-tdd-starter
- Owner: theashraf
- Created: 2019-09-24T15:14:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T10:02:47.000Z (over 3 years ago)
- Last Synced: 2025-02-02T00:51:19.334Z (about 1 year ago)
- Topics: react, react-boilerplate, react-starter
- Language: JavaScript
- Size: 993 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React TDD Starter
## What is TDD?
Test-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.
TDD approaches:
- Middle-Out Testing: an approach to testing that begins with domain objects and works from there out to user-facing code.
- 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.
## Outside-in Steps
TODO:
## Why Outside-in?
1. 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.
2. 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.
3. 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.
4. 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.
5. 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.
## Features
- [x] test setup
- [x] hot reload
- [x] code formatting
- [x] static code analysis using eslint
- [x] ~~travis starter config file~~ github CI workflow config
- [x] vaildate staged files on precommit hook
- [x] lint commit messages on commit hooks
## Available Scripts
### `npm start`
Runs the app in the development mode.
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### `npm test`
runs unit and e2e tests
### `npm run test:unit:watch`
runs unit tests in watch mode
### `npm run test:unit`
runs unit tests
### `npm run test:e2e`
runs e2e testing using cypress
### `npm run test:cy:open`
opens cypress
### `npm run build`
Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!.
### `npm run lint`
lints js and jsx files.
### `npm run commit`
prompts 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.
### `npm run format`
formats .js|jsx|json|md|yml files.