✨ Implement cleaner stack traces

See cypress-io/cypress#881 (comment)

front/cypress/plugins/index.js

@@ -1,3 +1,7 @@
+/**
+ * START vue-loader
+ * For cypress-vue-unit-test
+ */
 const { VueLoaderPlugin } = require('vue-loader')
 const webpack = require('@cypress/webpack-preprocessor')
 const webpackOptions = {
@@ -12,16 +16,29 @@ const webpackOptions = {
   plugins: [new VueLoaderPlugin()]
 }
 
-const options = {
+const optionsForWebpack = {
   webpackOptions,
   watchOptions: {}
 }
+/** END of `vue-loader` configuration */
+
+/**
+ * START of `cleaner stacktraces`
+ * See https://github.com/cypress-io/cypress/issues/881#issuecomment-485235225
+ */
+const browserify = require('@cypress/browserify-preprocessor')
+const optionsForBrowserify = browserify.defaultOptions
+optionsForBrowserify.browserifyOptions.transform[1][1].babelrc = true
+optionsForBrowserify.browserifyOptions.transform[1][1].retainLines = true
+
+/** END of `cleaner stacktraces` */
 
 /**
  * @type {Cypress.PluginConfig}
  */
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-  on('file:preprocessor', webpack(options))
+  on('file:preprocessor', webpack(optionsForWebpack))
+  on('file:preprocessor', browserify(optionsForBrowserify))
 }

front/cypress/support/index.js

@@ -1,20 +1,37 @@
-// ***********************************************************
-// This example support/index.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
+/**
+ * START `Implement cleaner stack traces`
+ * See https://github.com/cypress-io/cypress/issues/881#issuecomment-485235225
+ */
+const stacktraces = []
 
-// Import commands.js using ES2015 syntax:
-import './commands'
+before(() => {
+  stacktraces.length = 0
+})
 
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+Cypress.Commands.each(({ name }) => {
+  const fn = cy[name]
+  cy[name] = (...args) => {
+    const ret = fn.call(cy, ...args)
+    stacktraces.push({
+      stack: new Error().stack,
+      chainerId: ret.chainerId
+    })
+    return ret
+  }
+})
+
+Cypress.on('fail', (err, runnable) => {
+  const commands = runnable.commands
+  const cmdIdx = Cypress._.findLastIndex(commands, (cmd) => {
+    return (cmd.state === 'pending' || cmd.state === 'failed') && cmd.chainerId
+  })
+  const cmd = commands && commands[cmdIdx]
+  if (cmd) {
+    const data = Cypress._.find(stacktraces, { chainerId: cmd.chainerId })
+    if (data && data.stack) {
+      console.log(data.stack, data.chainerId)
+    }
+  }
+  throw err
+})
+/** END of `Implement cleaner stack traces` */