https://github.com/davidkhahn/tdd-in-react

Test Driven Development || Tech Used: Cypress (e2e), Jest, ESLint, Parcel, React, Materialize, CircleCI, Redux
https://github.com/davidkhahn/tdd-in-react

babel cypress enzyme eslint jest parcel-bundler react tdd

Last synced: 2 days ago
JSON representation

Test Driven Development || Tech Used: Cypress (e2e), Jest, ESLint, Parcel, React, Materialize, CircleCI, Redux

• Host: GitHub
• URL: https://github.com/davidkhahn/tdd-in-react
• Owner: DavidKHahn
• Created: 2019-10-17T20:25:37.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T23:14:39.000Z (almost 2 years ago)
• Last Synced: 2023-03-01T20:04:32.717Z (over 1 year ago)
• Topics: babel, cypress, enzyme, eslint, jest, parcel-bundler, react, tdd
• Language: JavaScript
• Homepage:
• Size: 380 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## TDD-in-React

**RULES TO FOLLOW WHEN TDD:**

    Red, Green and Refactor.

    "Write a failing test, a passing test and improve code."

       - A Senior Developer

   **Feature Tours:** https://iamvery.com/2018/11/14/feature-tours.html (Pros and Cons behind Feature Tours approach)

### Tools Used:

**Cypress**: Mainly used for end-to-end testing (similar to Mocha for test runner, Chai for expectations, Sinon for test doubles except Cypress runs all of these under the hood)

    yarn add --dev cypress

**Enzyme**: React Component testing

    yarn add --dev enzyme enzyme-adapter-react-16

**Jest**: Unit testing

    yarn add --dev jest @babel/preset-react @babel/plugin-syntax-dynamic-import babel-jest babel-core@^7.0.0-0 @babel/core

**ESLint**: Formatting JS

    yarn add --dev eslint eslint-config-codingitwrong babel-eslint eslint-plugin-jest

    yarn add --dev eslint-plugin-react

    yarn add --dev eslint-plugin-cypress

**Materialize**: Materialize CSS for UI designs (https://materializecss.com/getting-started.html)

    Include inside index.html:

    

    

    

    

    

    

**Babel**: JS Compiler mainly used to convert ECMAScript syntax for compatibility

    yarn add --dev @babel/plugin-proposal-class-properties

**Circle CI**:

`chmod +x bin/cypress` in master (CLI) after creating a bin folder in root of project with a cypress file containing:

    #!/bin/bash

    yarn start & wait-on http://localhost:1234

    $(yarn bin)/cypress run

Return to CircleCI dashboard and run setup for the project being used.

**Formik**:

Using Formik for form validation: https://github.com/jaredpalmer/formik

**React-Router-Dom**:

    https://reacttraining.com/react-router/web/guides/quick-start

    yarn add react-router-dom

**Redux**:

    yarn add redux react-redux redux-devtools-extension

**Redux-Thunk**:

    yarn add redux-thunk

**Axios**:

    yarn add axios