dev: use cypress preprocessor (#1413)

babel.config.js

@@ -5,6 +5,8 @@ const customPreset = api => {
   const plugins = [
     require.resolve('babel-plugin-dynamic-import-node'),
     ['no-side-effect-class-properties'],
+    ['@babel/plugin-proposal-private-property-in-object', {loose: true}], // cypress warning because loose is false in preset-env
+    ['@babel/plugin-proposal-private-methods', {loose: true}], // cypress warning because loose is false in preset-env
     ...evaluatedPreset.plugins,
   ]
   return {

cypress.config.js

@@ -1,8 +1,12 @@
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const {defineConfig} = require('cypress')
 
 module.exports = defineConfig({
   e2e: {
     baseUrl: 'http://localhost:6006',
     video: false,
+    setupNodeEvents(on) {
+      on('file:preprocessor', webpackPreprocessor())
+    },
   },
 })

package.json

@@ -74,6 +74,7 @@
   },
   "devDependencies": {
     "@babel/helpers": "^7.14.8",
+    "@cypress/webpack-preprocessor": "^5.12.2",
     "@docusaurus/core": "^2.0.1",
     "@docusaurus/module-type-aliases": "^2.0.1",
     "@docusaurus/preset-classic": "^2.0.1",