PSW-23: Testing with Cypress

[osheinonen]

Changes proposed in this PR:

• End-to-end testing and page specific visual regression testing with Cypress and cypress-image-snapshot
• Unit testing and component specific visual regression testing with Jest, testing-library, jsdom-screenshot and jest-image-snapshot
• Updated CircleCI config to include new jobs for dependency installation, caching and testing
• Added path aliases for Typescript and Jest configs
• npm scripts updated with testing related scripts
  • "test:jest": "jest"
  • "test:jest:update": "jest --updateSnapshot"
  • "test:cypress:open": "cypress open"
  • "test:cypress:run": "cypress run"
  • "test:cypress:run:update": "cypress run --env updateSnapshots=true"

Note:

1. There are some type conflict between Cypress and Jest. Those can be resolved with approach described here: https://github.com/cypress-io/cypress-and-jest-typescript-example
2. All of the testing scripts can be run locally but visual regression image snapshots generated in local machines will be different than those generated in CI (because of different OS and rendering engines). Locally generated image snapshots should never been pushed to version control. Maybe we could disable visual regression tests when test suites are run locally.

How to test:

1. Checkout to this branch locally
2. Open welcome.tsx component file (src/components/welcome/welcome.tsx)
3. Make a change to the rendered component (etc. add additional text)
4. Push changes and open CircleCI dashboard (https://app.circleci.com/pipelines/github/wunderio/nextjs-project?branch=testing)
5. Latest pipeline should show failing jest and cypress jobs
6. Inspect the jobs and their reason for failing
7. Artifact tab should show diff outputs for failing image snapshots
8. Download current output images (snapshots/current_output/...), replace old output images with these newly downloaded ones and push them to the version control
9. Now CircleCI pipeline jobs should all be passing

Link to feature environment:
https://testing.nextjs-project.dev.wdr.io/

[lauriskuznecovs]

Maybe we could use Node LTS version. v12 is quite old.
There is option to use v14.
https://circleci.com/developer/images/image/cimg/node#image-tags