feat: set up cypress component testing

[natterstefan]

TASK

Tasks

• add coverage report (example)
• resolve css-global issue (mentioned here)
  • This commit 7bc2167 does not work, but was added to use it as an example in the linked issue
  • Take a closer look at customizing the webpack config
    • validate https://stackoverflow.com/a/68593049/1238150
    • validate Importing correctly scoped css from node_modules outside of _app vercel/next.js#12079 (comment)
    • validate Importing correctly scoped css from node_modules outside of _app vercel/next.js#12079 (comment)
    • validate Global CSS cannot be imported from files other than your Custom <App>. nrwl/nx#3803 (comment)
  • validate if I can serve the css with the dev webpack server instead (src)
• add watch mode to tailwinds build command, in order to run component tests during development
• watch RFC: Global CSS Imports vercel/next.js#27953
  • use https://www.npmjs.com/package/next-global-css until fixed?

Notes

• I followed this guide: https://docs.cypress.io/guides/component-testing/framework-configuration#Next-js-Webpack-5
• Examples
  • https://github.com/cypress-io/cypress/tree/develop/npm/react/examples/nextjs#server-side-props
  • https://github.com/cypress-io/cypress/tree/master/npm/react/examples/nextjs-webpack-5 (does not use *.css files)
  • https://github.com/cypress-io/cypress/tree/master/npm/react/examples/tailwind: that's why I have a build:css script

css-global issue notes

• https://github.com/vercel/next.js/blob/74b159c850f2a79ca6f5efa6a308fe9e95dc1c1e/packages/next/build/webpack/config/blocks/css/index.ts#L269-L287
• vercel/next.js@1ea6745

next@^9.5.4-canary.10 now allows you to import Global CSS from node_modules anywhere in your application. This improves interoperability with third-party React libraries that require you import their CSS, but don't want it to increase bundle size for your entire application. (src)

But that does not help me when using a local file of the repo

Screenshots

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/natterstefan/nextjs-template/7zRQZsneAZbkuxrDqqMGAHEWxdcz
✅ Preview: https://nextjs-template-git-feature-202108-cypress-2a2f1e-natterstefan.vercel.app