feat: mocking ES6 imports (#329)

```js
import Hello from './Hello.vue'
import { mount } from 'cypress-vue-unit-test'
import * as GreetingModule from './greeting'

cy.stub(GreetingModule, 'greeting').returns('Cypress').as('greeting')
mount(Hello)
cy.contains('Hello, Cypress!')
// confirm the stub was called
cy.get('@Greeting').should('have.been.calledOnce')
```

Author: bahmutov

README.md

@@ -718,6 +718,20 @@ npm install
 npm run cy:open
 ```
 
+### Debugging
+
+Run Cypress with environment variable
+
+```
+DEBUG=cypress-vue-unit-test
+```
+
+If some deeply nested objects are abbreviated and do not print fully, set the maximum logging depth
+
+```
+DEBUG=cypress-vue-unit-test DEBUG_DEPTH=10
+```
+
 <a name="#faq"/>
 
 ## FAQ

cypress/component/advanced/mocking-imports/Hello.vue

@@ -9,7 +9,7 @@ export default {
   name: "Hello",
   data() {
     return {
-      greeting
+      greeting: greeting()
     };
   }
 };

cypress/component/advanced/mocking-imports/README.md

@@ -2,6 +2,6 @@
 
 Vue component in [Hello.vue](Hello.vue) imports a named ES6 import from [greeting.js](greeting.js). From the test [spec.js](spec.js) we can mock that import to make testing simpler.
 
-Compare no mocking
+![Test with mocking and without](images/mocking.png)
 
-![Test without mocking](images/no-mocking.png)
+The imports mocking is done using `@babel/plugin-transform-modules-commonjs` inserted as a `babel-loader` plugin automatically.

cypress/component/advanced/mocking-imports/greeting.js

@@ -1 +1 @@
-export const greeting = 'world'
+export const greeting = () => 'world'

cypress/component/advanced/mocking-imports/images/mocking.png

@@ -14,9 +14,11 @@ describe('Mocking ES6 imports', () => {
   })
 
   // https://github.com/bahmutov/cypress-vue-unit-test/issues/328
-  it.skip('shows mocked greeting', () => {
-    cy.stub(GreetingModule, 'greeting').returns('Cypress')
+  it('shows mocked greeting', () => {
+    cy.stub(GreetingModule, 'greeting').returns('Cypress').as('greeting')
     mount(Hello)
     cy.contains('Hello, Cypress!')
+    // confirm the stub was called
+    cy.get('@greeting').should('have.been.calledOnce')
   })
 })

cypress/component/advanced/mocking-imports/images/no-mocking.png

@@ -56,6 +56,7 @@
     "@babel/core": "7.9.0",
     "@babel/preset-env": "7.9.5",
     "axios": "0.19.2",
+    "babel-loader": "8.1.0",
     "ban-sensitive-files": "1.9.7",
     "css-loader": "3.4.2",
     "cypress": "4.9.0",
@@ -68,11 +69,11 @@
     "semantic-release": "^17.1.1",
     "standard": "12.0.1",
     "tailwindcss": "1.1.4",
+    "vue": "2.6.11",
     "vue-i18n": "7.8.1",
     "vue-loader": "14.2.4",
     "vue-router": "3.0.5",
     "vue-template-compiler": "2.6.11",
-    "vue": "2.6.11",
     "vuex": "3.1.1",
     "webpack": "4.42.0"
   },
@@ -85,12 +86,15 @@
   },
   "peerDependencies": {
     "vue": "2.x",
-    "cypress": ">=4.5.0"
+    "cypress": ">=4.5.0",
+    "babel-loader": "8"
   },
   "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "7.10.4",
     "@cypress/webpack-preprocessor": "5.4.1",
     "@kazupon/vue-i18n-loader": "0.5.0",
     "common-tags": "1.8.0",
+    "debug": "4.1.1",
     "find-webpack": "2.0.0"
   }
 }

cypress/component/advanced/mocking-imports/spec.js

@@ -3,6 +3,7 @@ const webpack = require('webpack')
 // Cypress webpack bundler adaptor
 // https://github.com/cypress-io/cypress-webpack-preprocessor
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const debug = require('debug')('cypress-vue-unit-test')
 
 const fw = require('find-webpack')
 const webpackOptions = fw.getWebpackOptions()
@@ -48,9 +49,33 @@ function compileTemplate (options = {}) {
   options.resolve.alias = options.resolve.alias || {}
   options.resolve.alias['vue$'] = 'vue/dist/vue.esm.js'
 }
+
+/**
+ * Warning: modifies the input object
+ */
+function insertBabelLoader(options) {
+  options.module.rules.push({
+    test: /\.js$/,
+    loader: 'babel-loader',
+    options: {
+      plugins: [
+        [
+          '@babel/plugin-transform-modules-commonjs',
+          {
+            loose: true,
+          }
+        ]
+      ]
+    },
+  })
+}
+
 inlineUrlLoadedAssets(webpackOptions)
 preventChunking(webpackOptions)
 compileTemplate(webpackOptions)
+insertBabelLoader(webpackOptions)
+
+debug('final webpack %o', webpackOptions)
 
 /**
  * Basic Cypress Vue Webpack file loader for .vue files