:status      
:integrations
:flair       

Crystal Ball Projects prototypical React application

• Setup - Getting started
• Testing - Running application test suites
• Developing - Application development tools and conventions
• Notes - Conventions and reference documentation

---

⚙️ Setup

1. Install dependencies

npm install

✅ Testing

The project includes 3 types of testing: static linting, unit testing and acceptance testing.

Static linting uses ESLint with the eslint-config-eloquence ruleset.

npm run test:lint

Unit testing uses Jest with @testing-library/react and is configured in jest.config.js

npm run test:unit
npm run test:watch

Acceptance testing uses Cypress inside of a Docker Compose environment

npm run test:acceptance

Code coverage

In CI runs code coverage is collected for unit and E2E tests and uploaded to Code Climate.

Cypress code coverage uses the Istanbul Babel plugin using the BABEL_ENV environment variabel and the Cypress code coverage plugin.

• Cypress code coverage
• NYC configs for Istanbul

Jest code coverage is reported by Jest and is configured in jest.config.js.

• Jest coverage docs

The tests each output to their own directories and the reports are formatted, merged and uploaded in the CI/CD action

Testing patterns

• React Router management requires the addition of a MemoryRouter (reference the Header component test file)

🌱 Development

Start the webpack development server.

npm start

Formatting

All JS, JSON, SCSS and markdown files are required to be formatted by Prettier and can be formatted using the format npm command.

📝 Notes

Miscellaneous project notes and explanations

Project dependencies

• Jest IntelliSense isn't working unless the @types/jest package is installed as a project dependency.