Add Cypress for end-to-end testing

[mttschltz]

No description provided.

[mttschltz]

After installing locally, got a whole bunch of these eslint errors

40:11  error  Unsafe call of an `any` typed value  @typescript-eslint/no-unsafe-call

Seems likely that Jest and Cypress globals are conflicting: typescript-eslint/typescript-eslint#2298 (comment)

There's a specific eslint plugin for Cypress but seems unlikely this will solve the issue as it's probably Typescript related: https://github.com/cypress-io/eslint-plugin-cypress

Cypress have a suggested way of splitting the TS config to separate them both: https://github.com/cypress-io/cypress-and-jest-typescript-example

[mttschltz]

A secondary problem has arisen, that when I try to exclude the cypress folder from the TS config, I then start getting an out of memory error

<--- JS stacktrace --->

FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [/usr/bin/node]

There's a discussion and some suggestions here typescript-eslint/typescript-eslint#1192 (comment) which basically boil down to go with:

• A single TS config at root individually including the packages you want
• Lint each package separately
• Consider using two configs: An IDE config without type information (default root), a CLI config with type information

[mttschltz]

It would likely be difficult to tackle these two issues at once.

Might be best to remove Cypress and restructure TS and ESLint configs that abide by recommendations from Cypress (about avoiding clashes with Jest) and the performance recommendations from the last comment

[mttschltz]

Will starting from scratch and adding one package at a time

1. Remove extra TS config files
2. In root TS config file: a. Include lib/life, b. exclude tests
3. Create tsconfig.lint.json that extends other, with compilerOptions{noEmit:true} and override excludes to be empty []
4. Add roots to jest config: https://github.com/cypress-io/cypress-and-jest-typescript-example/blob/master/jest.config.js
5. Run all checks below for this package
6. Include app/store in root TS config file
7. Run all checks below for this package and lib/life
8. Repeat for existing packages.
9. Add Cypress: https://github.com/cypress-io/cypress-and-jest-typescript-example

After each step, need to test:
a. yarn lint:types passes when expected
b. yarn lint:types fails when expected
c. VSCode picks up type issue in package
d. yarn lint:eslint passes when expected
e. yarn lint:eslint fails when expected
f. VSCode picks up type issue in package
g. yarn test:unit works
h. VSCode Jest tests work
i. Package can be build from root yarn script

[mttschltz]

After attempting the above strategy, and re-reading the suggestions in the linked issues (which I think I misunderstood first time), I decided to change approach.

Instead I've separated the 6 packages more cleanly and do type/eslint linting separately on all 6 of them, and only on those 6. This should allow Cypress to be added to another folder and the existing Typescript and ESlint configs won't apply to it. And they shouldn't pollute each others' namespaces

Done in 8455737

[mttschltz]

This link suggested creating a separate TS config for linting that doesn't include test files, e.g. tsconfig.eslint.json But I haven't done that

https://github.com/cypress-io/cypress-and-jest-typescript-example