Support all mount options in vue-test-utils

Author: dfcook

package.json

@@ -46,7 +46,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "coveralls": "^3.0.2",
-    "eslint": "^5.11.0",
+    "eslint": "^5.11.1",
     "eslint-config-standard": "^12.0.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-node": "^8.0.0",

src/index.js

@@ -13,9 +13,9 @@ import {
 const mountedWrappers = new Set()
 
 function render (TestComponent, {
-  props = null,
   store = null,
-  routes = null
+  routes = null,
+  ...mountOptions
 } = {}, configurationCb) {
   const localVue = createLocalVue()
   let vuexStore = null
@@ -39,13 +39,15 @@ function render (TestComponent, {
     configurationCb(localVue)
   }
 
+  const { props, ...rest } = mountOptions
   const wrapper = mount(TestComponent, {
     localVue,
     router,
     store: vuexStore,
     propsData: { ...props },
     attachToDocument: true,
-    sync: false
+    sync: false,
+    ...rest
   })
 
   mountedWrappers.add(wrapper)

tests/__tests__/components/Button.vue

@@ -1,31 +1,33 @@
 <template>
-  <button :class="typeClass" @click="clicked">{{ text }}</button>
+  <button
+    :class="typeClass"
+    @click="clicked"
+  >{{ text }}</button>
 </template>
 
 <script>
 export default {
   props: {
     text: {
       type: String,
-      default: '',
+      default: ''
     },
     clicked: {
       type: Function,
       default: () => true
     },
     type: {
       validator: (value) => ['primary', 'secondary'].includes(value),
-    },
-
+      default: 'primary'
+    }
   },
   computed: {
-    typeClass: function() {
+    typeClass: function () {
       if (this.type) {
-        return `button button--${this.type}`;
+        return `button button--${this.type}`
       }
-      return 'button';
-    },
-  },
-  
-};
-</script>
+      return 'button'
+    }
+  }
+}
+</script>

tests/__tests__/components/Form.vue

@@ -0,0 +1,22 @@
+<template>
+  <form>
+    <label for="search">
+      <FontAwesomeIcon icon="search"/> Search
+    </label>
+    <input
+      id="search"
+      type="text"
+      name="search"
+    >
+    <VButton text="Search now" />
+  </form>
+</template>
+
+<script>
+import VButton from './Button'
+
+export default {
+  name: 'SearchForm',
+  components: { VButton }
+}
+</script>

tests/__tests__/integration-with-stubs.js

@@ -0,0 +1,11 @@
+import { render, cleanup } from '../../src'
+import Form from './components/Form'
+
+afterEach(cleanup)
+
+test('Form contains search button', () => {
+  const { getByText } = render(Form, {
+    stubs: ['FontAwesomeIcon']
+  })
+  getByText('Search now')
+})

tests/__tests__/simple-button.js

@@ -1,5 +1,5 @@
-import { render, cleanup, fireEvent } from '../../src';
-import SimpleButton from './components/Button';
+import { render, cleanup, fireEvent } from '../../src'
+import SimpleButton from './components/Button'
 
 afterEach(cleanup)
 
@@ -20,4 +20,4 @@ test('clicked prop is called when button is clicked', () => {
   })
   fireEvent.click(getByText(text))
   expect(clicked).toBeCalled()
-})
+})