Cypress 10 support

[laracasts]

Cypress 10 support

[curtisblackwell]

This may be more appropriate for the Mix repo, but is less compelling outside of a specific context like this one.

Cypress added support for component tests, which are integration tests that allow you to mount a component and interact with it as someone would in the browser without the need for a Laravel route.

I find component tests far easier to work with than Jest unit tests and would like to use the feature in Laravel apps I'm using Mix with. However, as far as I can tell, there's no simple way to feed the Mix-generated Webpack config into Cypress (as instructed in the Cypress docs and) shown below:

module.exports = {
  component: {
    devServer: {
      framework: 'vue',
      bundler: 'webpack',
      // optionally pass in webpack config — not so optional with a Mix setup
      webpackConfig: require('./webpack.config'),
    },
  },
}

It would be nice if this package, as part of adding support for Cypress 10, also played nicely with Cypress's component testing. I imagine that would mean adding a section in the docs that shows how to pass in the Webpack config from Mix. Or maybe even a stub?

I'm happy to contribute, I'd just want to know this is something maintainers (is it just @JeffreyWay?) would want to add support for and some help with/guidance in getting the Webpack config out of Mix.

[JeffreyWay]

@curtisblackwell Yeah, this is probably a better question for the Mix repo.

@emargareten Cypress 10 support has now been added. Upgrade to v3.

[troccoli]

Since the plugins directory is not supported anymore, I had to put the tasks in cypress.config.js

const {defineConfig} = require("cypress");
const fs = require("fs");

module.exports = defineConfig({
    e2e: {
        baseUrl: 'http://localhost',
        setupNodeEvents(on, config) {
            on('task', {
                activateCypressEnvFile() {
                    if (fs.existsSync('.env.cypress')) {
                        fs.renameSync('.env', '.env.backup');
                        fs.renameSync('.env.cypress', '.env');
                    }

                    return null;
                },

                activateLocalEnvFile() {
                    if (fs.existsSync('.env.backup')) {
                        fs.renameSync('.env', '.env.cypress');
                        fs.renameSync('.env.backup', '.env');
                    }

                    return null;
                },
            })
        },
    },
});

I'm sure there are other things to change, but this is a start.

[dillingham]

Working so far by

• adding the env swap plugin as mentioned above
• moving package stub files into /cypress/support and importing them within /cypress/support/e2e.js

[ValCanBuild]

It worked for me without any changes by just running the auto migrate tool that comes with cypress 10