BDD set up

apps/explorer-e2e/cypress.json

@@ -1,12 +1,18 @@
 {
+  "baseUrl": "http://localhost:4200",
   "fileServerFolder": ".",
-  "fixturesFolder": "./src/fixtures",
+  "fixturesFolder": false,
+  "pluginsFile": "./src/plugins/index.js",
+  "testFiles": "*.{ts,feature,features}",
+  "ignoreTestFiles": "**/*.js",
   "integrationFolder": "./src/integration",
   "modifyObstructiveCode": false,
   "supportFile": "./src/support/index.ts",
-  "pluginsFile": false,
   "video": true,
   "videosFolder": "../../dist/cypress/apps/explorer-e2e/videos",
   "screenshotsFolder": "../../dist/cypress/apps/explorer-e2e/screenshots",
-  "chromeWebSecurity": false
+  "chromeWebSecurity": false,
+  "env": {
+    "tsConfig": "tsconfig.json"
+  }
 }

apps/explorer-e2e/src/integration/home-page.feature

@@ -0,0 +1,4 @@
+Feature: Home page
+
+  Scenario: Visit Home page
+    Given I go to the homepage

apps/explorer-e2e/src/plugins/index.js

@@ -0,0 +1,75 @@
+/// <reference types="cypress" />
+
+const webpackPreprocessor = require('@cypress/webpack-preprocessor');
+const webpack = require('webpack');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  on(
+    'file:preprocessor',
+    webpackPreprocessor({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+          plugins: [
+            new TsconfigPathsPlugin({
+              configFile: config.env.tsConfig,
+              extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
+            }),
+          ],
+          fallback: {
+            path: require.resolve('path-browserify'),
+          },
+        },
+        module: {
+          rules: [
+            {
+              test: /\.([jt])sx?$/,
+              loader: 'ts-loader',
+              exclude: [/node_modules/],
+              options: {
+                configFile: config.env.tsConfig,
+                // https://github.com/TypeStrong/ts-loader/pull/685
+                experimentalWatchApi: true,
+                transpileOnly: true,
+              },
+            },
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: 'cypress-cucumber-preprocessor/loader',
+                },
+              ],
+            },
+            {
+              test: /\.features$/,
+              use: [
+                {
+                  loader: 'cypress-cucumber-preprocessor/lib/featuresLoader',
+                },
+              ],
+            },
+          ],
+        },
+        plugins: [
+          new ForkTsCheckerWebpackPlugin({
+            typescript: {
+              enabled: true,
+              configFile: config.env.tsConfig,
+            },
+          }),
+          new webpack.ProvidePlugin({
+            process: 'process/browser',
+          }),
+        ],
+        externals: [nodeExternals()],
+      },
+    })
+  );
+};

apps/explorer-e2e/src/support/step_definitions/home-page.step.js

@@ -0,0 +1,5 @@
+import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+
+Given('I go to the homepage', () => {
+  cy.visit('/');
+});

package.json

@@ -66,6 +66,7 @@
     "babel-jest": "27.2.3",
     "babel-loader": "8.1.0",
     "cypress": "^9.1.0",
+    "cypress-cucumber-preprocessor": "^4.3.1",
     "eslint": "~8.7.0",
     "eslint-config-next": "12.0.7",
     "eslint-config-prettier": "8.1.0",