Fixing dynamic imports

[JessicaSachs]

Adds support for the following use cases

• Components rendering dynamic routes with <router-link>
• Asynchronous components with delays
• Any dynamic import () => import('./myCoolCode')

Context

Cypress does not have the ability to serve static assets. This becomes problematic when dealing with chunks like [name]-[hash].js.

Vue CLI, by default, splits out vendors into their own chunk, so the splitChunks plugin is enabled by default. While we can turn Split Chunks off, we still have to contend with raw Dynamic Imports.

Because Cypress cannot serve static assets, we would like a single chunk to be generated by webpack. This solution must also work for any dynamic imports that will be executed.

Solution

delete webpackOptions.optimization.splitChunks // remove previous chunk settings
webpackOptions.plugins.push(
  new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1 // no chunks from dynamic imports -- includes the entry file
  })
)

• For Webpack 4, we can achieve this behavior by settings the LimitChunkCountPlugin to include the value maxChunks: 1. Documentation found here
• Coincidentally, this will be done by default in Webpack 5.

[bahmutov]

this delete looks suspicious

[JessicaSachs]

It was breaking the e2e tests. I was also suspicious. @bahmutov what's this line doing for us? I don't see a support file.

[bahmutov]

we need to load suport file which creates a placeholder element in the iframe, which we do in
we point at that support file here https://github.com/bahmutov/cypress-vue-unit-test/pull/247/files#diff-73ffe0d8ebfaf5bdc6b0546e41f576c0R11 using an alias to avoid coding ../../support https://github.com/bahmutov/cypress-vue-unit-test/pull/247/files#diff-6d4bb79610683d9749d2cbb62e708d88

If this breaks, land this PR after #287 and we can check out the merged result to see if it works correctly

[JessicaSachs]

Seemingly no issues after merging that PR... will continue merging and then validate again

[bahmutov]

good to land

[bahmutov]

🎉 This PR is included in version 1.12.0-cypress-mount-mode.2 🎉

The release is available on:

• npm package (@feature/cypress-mount-mode dist-tag)
• GitHub release

Your semantic-release bot 📦🚀