cypress-io/cypress-react-unit-test

loadWebpack plugin doesn't work with terser, @rails/webpacker

anark opened this issue · 8 comments

anark commented

I am trying to load my own webpack config(from @rails/webpacker) to use with component testing using the plugins file below

const webpackPreprocessor = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  config.env.webpackFilename = 'config/webpack/development.js'
  require('cypress-react-unit-test/plugins/load-webpack')(on, config)
  return config
}

However when I try to run the component test I get the error in the viewer of TypeError: (0 , _schemaUtils.validate) is not a function.

If I enable DEBUG='cypress:*' I can see the following error

cypress:server:controllers:spec preprocessor error for spec 'app/javascript/components/FileSelect/FileSelect.spec.tsx': TypeError: (0 , _schemaUtils.validate) is not a function
     at new TerserPlugin (/Users/andrewnarkewicz/Development/sky-pilot/node_modules/terser-webpack-plugin/dist/index.js:48:31)
     at Object.apply (/Users/andrewnarkewicz/Development/sky-pilot/node_modules/webpack/lib/WebpackOptionsDefaulter.js:310:6)
     at WebpackOptionsApply.process (/Users/andrewnarkewicz/Development/sky-pilot/node_modules/webpack/lib/WebpackOptionsApply.js:481:16)
     at webpack (/Users/andrewnarkewicz/Development/sky-pilot/node_modules/webpack/lib/webpack.js:57:48)
     at Object.handler (/Users/andrewnarkewicz/Development/sky-pilot/node_modules/@cypress/webpack-preprocessor/dist/index.js:143:24)
     at invoke (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:23:16)
     at /Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:41:14
     at tryCatcher (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
     at Function.Promise.attempt.Promise.try (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
     at Object.wrapChildPromise (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:40:23)
     at Object.wrap (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/preprocessor.js:28:8)
     at execute (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:118:20)
     at EventEmitter.<anonymous> (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:240:5)
     at EventEmitter.emit (events.js:310:20)
     at process.<anonymous> (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
     at process.emit (events.js:310:20)
     at process.emit (/Users/andrewnarkewicz/Library/Caches/Cypress/5.4.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/source-map-support/source-map-support.js:495:21)
     at emit (internal/child_process.js:876:12)
     at processTicksAndRejections (internal/process/task_queues.js:85:21)
 (0 , _schemaUtils.validate) is not a function

Does anyone have an idea how to make this work? Or does anyone have an example of using cypress-react-unit-test in a @rails/webpacker based project?

bahmutov commented
anark commented

Thanks @bahmutov ,
I have created a basic example(mostly boilerplate from the rails and webpacker generators) and description of both issue at https://github.com/anark/cypress-react-unit-testing-example.

Let me know if there is anything I can do to help.

bahmutov commented

I have made it work, see README in my fork https://github.com/bahmutov/react-testing-rails-webpacker

Let me know if you can get your project to run, note you need cypress-react-unit-test@4.16.1

anark commented

Thanks @bahmutov, That fix works for me. Webpack should be set to development mode if NODE_ENV is 'development', however something looks to be messing that up. I'll do a bit of digging to find out why.

Thank you.

bahmutov commented
anark commented

It looks like the 'mode' is not set to development because require('cypress-react-unit-test/plugins/load-webpack')(on, config) is running webpack without the defined RAILS_ENV='development' environment variable.

Would it be possible to forward on those environment variables when running webpack in this way?

bahmutov commented

Have you tried setting process.env.RAILS_ENV='development' in cypress/plugins/index.js file?

anark commented

It seems to work if you specify it there. Thanks, that was causing me a lot of confusion as webpacker normally accepts these ENV variables as arguments set from the command line.

Strange that they were not forwarded on