@cypress/vue with Laravel-Mix

Viewed 304

TLDR: Has anybody ever used @cypress/vue plugin together with Laravel-Mix in a Laravel project?

I'm creating a Laravel 7.24 project with VueJs 2.6.12 and Vuetify 2.3. I'm creating custom Vue components and I want to unit test them with Cypress (4.8) and @cypress/vue plugin. I've installed both, Cypress and @cypress/vue. Now I'm at the point where I have to provide my Webpack config to the @cypress/webpack-preprocessor. I do not use pure Webpack but Laravel-Mix. So my Webpack config is build up of Laravel-Mix's default Webpack config and my custom webpack.mix.js file.

The problem that I could not solve yet is: How to get the complete Webpack config object (default config + costum config from webpack.mix.js) from Webpack as a variable so that I can insert it into @cypress/webpack-preprocessor. If possible I do not want to write the Webpack config object manually. I would rather prefer to be able to create it with Webpack or Laravel-Mix and store it into a variable.

Has anybody ever done that? Please tell me if you need further information to answer this question.

1 Answers

As per Vue with Webpack in Cypress guides, add this line to optionally pass in webpack config in your "cypress.config.js" file:

  webpackConfig: require('./name.of.your.webpack.file'),
Related