feat: set up cypress component testing

cypress.json

@@ -1,4 +1,6 @@
 {
   "baseUrl": "http://localhost:3000",
-  "video": false
+  "video": false,
+  "testFiles": "**/*.spec.{ts,tsx}",
+  "componentFolder": "src"
 }

cypress/plugins/index.ts

@@ -9,13 +9,20 @@
 // https://on.cypress.io/plugins-guide
 // ***********************************************************
 
+import injectDevServer from '@cypress/react/plugins/next'
+
 /**
  * This function is called when a project is opened or re-opened (e.g. due to
  * the project's config changing)
+ *
+ * `on` is used to hook into various events Cypress emits
+ * `config` is the resolved Cypress config
  */
-const plugin: Cypress.PluginConfig = (_on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+const plugin: Cypress.PluginConfig = (on, config) => {
+  if (config.testingType === 'component') {
+    injectDevServer(on, config)
+  }
+
   return config
 }
 

cypress/support/index.ts

@@ -13,5 +13,20 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 
+/**
+ * ATTENTION: does not work yet!
+ *
+ * In order to use styles in component tests, we have to import the generated
+ * tailwind.css file here. Next's webpack config will not allow adding *.css
+ * files on component level, except for CSS Modules (which we don't use).
+ *
+ * inspired by
+ * @see https://github.com/cypress-io/cypress/issues/16879#issuecomment-861039210
+ *
+ * Further reading material
+ * @see https://nextjs.org/docs/messages/css-global
+ */
+import '../../dist/cypress.css'
+
 import './commands'
 import './console'

package.json

@@ -14,13 +14,16 @@
   "scripts": {
     "build-storybook": "build-storybook",
     "build": "next build",
+    "build:css": "tailwindcss -i src/styles/index.scss -o dist/cypress.css",
     "cypress:open": "cypress open",
+    "cypress:open:react": "cypress open-ct",
     "cypress:run": "cypress run",
     "dev": "next",
     "lint": "yarn lint:ts && yarn lint:css",
     "lint:ts": "tsc && eslint --cache \"./**/*.{ts,tsx}\"",
     "lint:css": "stylelint --cache './**/*.{ts,tsx,scss}'",
     "prepare": "node scripts/setup && is-ci || husky install",
+    "precypress:open:react": "yarn build:css",
     "start": "next start",
     "storybook": "start-storybook -p 6006 -s ./public",
     "test": "jest",
@@ -41,9 +44,11 @@
     "react-i18next": "^11.11.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
+    "@babel/core": "^7.15.0",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
+    "@cypress/react": "^5.9.3",
+    "@cypress/webpack-dev-server": "^1.4.0",
     "@natterstefan/scripts": "^1.2.0",
     "@next/eslint-plugin-next": "^11.0.1",
     "@semantic-release/changelog": "^5.0.1",
@@ -69,7 +74,7 @@
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "css-loader": "^6.2.0",
-    "cypress": "^8.1.0",
+    "cypress": "^8.2.0",
     "enzyme": "^3.11.0",
     "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.2.1",
@@ -82,6 +87,7 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "html-webpack-plugin": "^5.3.2",
     "husky": "^7.0.1",
     "is-ci": "^3.0.0",
     "jest": "^27.0.6",
@@ -93,7 +99,7 @@
     "postcss-loader": "^6.1.1",
     "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
-    "sass": "^1.37.2",
+    "sass": "^1.37.5",
     "sass-loader": "^12.1.0",
     "semantic-release": "^17.4.4",
     "start-server-and-test": "^1.13.1",
@@ -104,6 +110,7 @@
     "stylelint-config-recommended": "^5.0.0",
     "tailwindcss": "^2.2.7",
     "typescript": "^4.3.5",
-    "webpack": "^5.48.0"
+    "webpack": "^5.48.0",
+    "webpack-dev-server": "^3.11.2"
   }
 }

src/components/navigation/__cypress__/Navigation.spec.tsx

@@ -0,0 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react'
+import { mount } from '@cypress/react'
+
+import { Standard } from '../__stories__/Navigation.stories'
+
+it('Renders page component', () => {
+  mount(<Standard {...Standard.args} />)
+  cy.contains('Tailwind Docs')
+})

src/components/navigation/__tests__/Navigation.test.tsx

@@ -5,21 +5,21 @@ import { useRouter } from 'next/router'
 
 import { mockNextUseRouter } from '@/jest.setup'
 
-import { Navigation } from '..'
+import { Standard } from '../__stories__/Navigation.stories'
 
 describe('Navigation', () => {
   beforeAll(() => {
     mockNextUseRouter()
   })
 
   it('renders Link', () => {
-    const wrapper = mount(<Navigation />)
+    const wrapper = mount(<Standard {...Standard.args} />)
     expect(wrapper.find(Link).first().text()).toStrictEqual('common:home')
     expect(wrapper.find(Link).first().prop('href')).toStrictEqual('/')
   })
 
   it('renders link to German home page', () => {
-    const wrapper = mount(<Navigation />)
+    const wrapper = mount(<Standard {...Standard.args} />)
 
     const germanLink = wrapper.find(Link).at(1)
     germanLink.simulate('click')

src/components/navigation/index.tsx

@@ -1 +1 @@
-export * from './Navigation'
+export { Navigation } from './Navigation'

src/components/page/index.ts

@@ -1 +1 @@
-export * from './Page'
+export { Page } from './Page'