Webpack preprocessor typescript

cypress.config.js

@@ -1,5 +1,24 @@
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
+
+function getWebpackOptions () {
+  const options = webpackPreprocessor.getFullWebpackOptions()
+
+  options.resolve.fallback.crypto = require.resolve('crypto-browserify')
+
+  return options
+}
+
 module.exports = {
   e2e: {
-    setupNodeEvents(on, config) {},
+    setupNodeEvents(on, config) {
+      on(
+        'file:preprocessor',
+        webpackPreprocessor({
+          // if using typescript, you will need to set the typescript option to true
+          typescript: true,
+          webpackOptions: getWebpackOptions(),
+        }),
+      );
+    },
   },
 }

cypress/e2e/spec.cy.js → cypress/e2e/spec.cy.ts

@@ -2,5 +2,6 @@
 describe('page', () => {
   it('works', () => {
     cy.visit('https://example.cypress.io')
+    cy.crypto().should('eq', 'some-secret')
   })
 })

cypress/support/commands.js

@@ -1,3 +1,5 @@
+import crypto from 'crypto';
+
 // ***********************************************
 // This example commands.js shows you how to
 // create various custom commands and overwrite
@@ -23,3 +25,9 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+Cypress.Commands.add("crypto", () => {
+  return crypto.createHmac('sha256', 'some-secret')
+               .update('I love cupcakes')
+               .digest('hex');
+})