(bug) crypto.randomBytes is not a function (cypress 5.0.0)

[jclohmann]

Describe the bug After updating to cypress 5.0.0, I get this error-message when running a test:

  > crypto.randomBytes is not a function

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Check your console for the stack trace or click this message to see where it originated from.

node_modules/cypress-plugin-snapshots/src/config.js:6:1

  4 | 
  5 | function createToken() {
> 6 |   return crypto.randomBytes(64).toString('hex');
    | ^
  7 | }
  8 | 
  9 | const DEFAULT_SCREENSHOT_CONFIG = Object.freeze({

Desktop (please complete the following information):

• OS: Linux
• Cypress Version 5.0.0

Additional context

• tested browsers:
  • Chromium 84
  • Firefox 79
  • Electron 83

[egrubbs]

When I upgraded from Cypress 4.8.0 to 5.1.0, the crypto.randomBytes is not a function error started occurring in cypress-plugin-snapshots/src/config.js.

I was able to fix it by adding this to cypress/plugins/index.js:

const browserify = require('@cypress/browserify-preprocessor')

module.exports = (on) => {
  on('file:preprocessor', browserify())
}

https://github.com/cypress-io/cypress-browserify-preprocessor#usage

[mattfwood]

@egrubbs Thanks so much for that, that fixed it for me.

To add some context, it looks like cypress-plugin-snapshots is using the Node crypto package. It seems like somewhere in Cypress v5+ it no longer automatically compiling node modules for whatever reason.

Also, if you're using typescript, the above snippet will need to be:

// cypress/plugins/index.js
module.exports = (on, config) => {
  on(
    'file:preprocessor',
    browserify({
      typescript: require.resolve('typescript'),
    })
  );

  return config;
};