feat: add webpack preprocessor, close #2

Author: bahmutov

README.md

@@ -289,58 +289,8 @@ p {
 </style>
 ```
 
-How do we load this Vue file into the testing code? Using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme) and [vue-loader](https://github.com/vuejs/vue-loader).
-You can use [cypress/plugins/index.js](cypress/plugins/index.js) to load `.vue` files
-using `vue-loader`.
-
-```js
-// cypress/plugins/index.js
-const webpack = require('@cypress/webpack-preprocessor')
-const webpackOptions = {
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      }
-    ]
-  }
-}
-
-const options = {
-  // send in the options from your webpack.config.js, so it works the same
-  // as your app's code
-  webpackOptions,
-  watchOptions: {}
-}
-
-module.exports = on => {
-  on('file:preprocessor', webpack(options))
-}
-```
-
-Install dev dependencies
-
-```shell
-npm i -D @cypress/webpack-preprocessor \
-  vue-loader vue-template-compiler css-loader
-```
-
-And write a test
-
-```js
-import Hello from '../../components/Hello.vue'
-const mountVue = require('cypress-vue-unit-test')
-
-/* eslint-env mocha */
-describe('Hello.vue', () => {
-  beforeEach(mountVue(Hello))
-
-  it('shows hello', () => {
-    cy.contains('Hello World!')
-  })
-})
-```
+**note** to learn how to load Vue component files in Cypress, see
+[Bundling](#bundling) section.
 
 Do you want to interact with the component? Go ahead! Do you want
 to have multiple components? No problem!
@@ -438,6 +388,83 @@ and is emitting an event.
 
 [cypress.io]: https://www.cypress.io/
 
+## Bundling
+
+How do we load this Vue file into the testing code? Using webpack preprocessor.
+
+### Short way
+
+Your project probably already has `webpack.config.js` setup to transpile
+`.vue` files. To load these files in the Cypress tests, grab the webpack
+processor included in this module, and load it from the `cypress/plugins/index.js`
+file.
+
+```js
+const {
+  onFilePreprocessor
+} = require('cypress-vue-unit-test/preprocessor/webpack')
+module.exports = on => {
+  on('file:preprocessor', onFilePreprocessor('../path/to/webpack.config'))
+}
+```
+
+Cypress should be able to import `.vue` files in the tests
+
+### Manual
+
+Using [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress-webpack-preprocessor#readme) and [vue-loader](https://github.com/vuejs/vue-loader).
+You can use [cypress/plugins/index.js](cypress/plugins/index.js) to load `.vue` files
+using `vue-loader`.
+
+```js
+// cypress/plugins/index.js
+const webpack = require('@cypress/webpack-preprocessor')
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  }
+}
+
+const options = {
+  // send in the options from your webpack.config.js, so it works the same
+  // as your app's code
+  webpackOptions,
+  watchOptions: {}
+}
+
+module.exports = on => {
+  on('file:preprocessor', webpack(options))
+}
+```
+
+Install dev dependencies
+
+```shell
+npm i -D @cypress/webpack-preprocessor \
+  vue-loader vue-template-compiler css-loader
+```
+
+And write a test
+
+```js
+import Hello from '../../components/Hello.vue'
+const mountVue = require('cypress-vue-unit-test')
+
+/* eslint-env mocha */
+describe('Hello.vue', () => {
+  beforeEach(mountVue(Hello))
+
+  it('shows hello', () => {
+    cy.contains('Hello World!')
+  })
+})
+```
+
 ### Small print
 
 Author: Gleb Bahmutov &lt;[email protected]&gt; &copy; 2017

cypress/plugins/index.js

@@ -1,23 +1,17 @@
-// https://github.com/cypress-io/cypress-webpack-preprocessor
-const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+// default webpack file preprocessor is good for simple cases
+const { onFileDefaultPreprocessor } = require('../../preprocessor/webpack')
 
-// Cypress webpack options or just require from
-// an existing webpack.config.js
-const webpackOptions = {
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader'
-      }
-    ]
-  }
+module.exports = on => {
+  on('file:preprocessor', onFileDefaultPreprocessor)
 }
 
-const options = {
-  webpackOptions
-}
+/*
+  for more complex cases, when the project already includes webpack.config.js
 
-module.exports = on => {
-  on('file:preprocessor', webpackPreprocessor(options))
-}
+  const {
+    onFilePreprocessor
+  } = require('cypress-vue-unit-test/preprocessor/webpack')
+  module.exports = on => {
+    on('file:preprocessor', onFilePreprocessor('../path/to/webpack.config'))
+  }
+*/

package.json

@@ -30,6 +30,7 @@
   },
   "files": [
     "src/*.js",
+    "preprocessor/*.js",
     "!src/*-spec.js"
   ],
   "homepage": "https://github.com/bahmutov/cypress-vue-unit-test#readme",
@@ -52,10 +53,10 @@
     "deps": "deps-ok && dependency-check --no-dev .",
     "issues": "git-issues",
     "license": "license-checker --production --onlyunknown --csv",
-    "lint": "standard --verbose --fix src/*.js",
+    "lint": "standard --verbose --fix src/*.js preprocessor/*.js",
     "prelint": "npm run pretty",
     "pretest": "npm run lint",
-    "pretty": "prettier-standard 'src/*.js'",
+    "pretty": "prettier-standard 'src/*.js' 'preprocessor/*.js'",
     "secure": "nsp check",
     "size": "t=\"$(npm pack .)\"; wc -c \"${t}\"; tar tvf \"${t}\"; rm \"${t}\";",
     "test": "npm run cy:run",

preprocessor/webpack.js

@@ -0,0 +1,43 @@
+// Cypress webpack bundler adaptor
+// https://github.com/cypress-io/cypress-webpack-preprocessor
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+
+// default Cypress webpack options - good for basic projects
+const webpackOptions = {
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader'
+      }
+    ]
+  }
+}
+
+/**
+ * Basic Cypress Vue Webpack file loader for .vue files
+ */
+const onFileDefaultPreprocessor = webpackPreprocessor({ webpackOptions })
+
+/**
+ * Custom Vue loader from the client projects that already have `webpack.config.js`
+ *
+ * @example
+ *    const {
+ *      onFilePreprocessor
+ *    } = require('cypress-vue-unit-test/preprocessor/webpack')
+ *    module.exports = on => {
+ *      on('file:preprocessor', onFilePreprocessor('../path/to/webpack.config'))
+ *    }
+ */
+const onFilePreprocessor = webpackOptions => {
+  if (typeof webpackOptions === 'string') {
+    // load webpack config from the given path
+    webpackOptions = require(webpackOptions)
+  }
+  return webpackPreprocessor({
+    webpackOptions
+  })
+}
+
+module.exports = { onFilePreprocessor, onFileDefaultPreprocessor }

src/index.js

@@ -4,7 +4,7 @@ const { stripIndent } = require('common-tags')
 // and "losing" styles when the next test starts
 const stylesCache = new Map()
 
-function copyStyles (component) {
+const copyStyles = component => {
   let styles
   if (stylesCache.has(component)) {
     styles = stylesCache.get(component)
@@ -35,7 +35,7 @@ function copyStyles (component) {
 
 const deleteConstructor = comp => delete comp._Ctor
 
-function deleteCachedConstructors (component) {
+const deleteCachedConstructors = component => {
   if (!component.components) {
     return
   }
@@ -68,6 +68,7 @@ const mountVue = (component, options = {}) => () => {
     document.write(vueHtml)
     document.close()
   })
+
   cy
     .window()
     .its('Vue')