Merge pull request #13 from dfcook/mount-options

Support all mount options in vue-test-utils

Author: dfcook

README.md

@@ -116,9 +116,9 @@ The `render` function takes up to 3 parameters and returns an object with some h
 
 1. Component - the Vue component to be tested.
 2. RenderOptions - an object containing additional information to be passed to @vue/test-utils mount. This can be:
-* props - The component props to be passed to TestComponent
 * store - The object definition of a Vuex store, if present `render` will configure a Vuex store and pass to mount.
 * routes - A set of routes, if present render will configure VueRouter and pass to mount.
+All additional render options are passed to the vue-test-utils mount function in its options.
 3. configurationCb - A callback to be called passing the Vue instance when created. This allows 3rd party plugins to be installed prior to mount.
 
 ### fireEvent

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,18 @@ function render (TestComponent, {
     configurationCb(localVue)
   }
 
+  if (!mountOptions.propsData && !!mountOptions.props) {
+    mountOptions.propsData = mountOptions.props
+    delete mountOptions.props
+  }
+
   const wrapper = mount(TestComponent, {
     localVue,
     router,
     store: vuexStore,
-    propsData: { ...props },
     attachToDocument: true,
-    sync: false
+    sync: false,
+    ...mountOptions
   })
 
   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__/fetch.js

@@ -10,7 +10,7 @@ test('Fetch makes an API call and displays the greeting when load-greeting is cl
     })
   )
 
-  const { html, getByText } = render(Fetch, { props: { url: '/greeting' } })
+  const { html, getByText } = render(Fetch, { propsData: { url: '/greeting' } })
 
   // Act
   await fireEvent.click(getByText('Fetch'))

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()
-})
+})

yarn.lock

@@ -1873,10 +1873,10 @@ eslint-visitor-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
   integrity sha512-qzm/XxIbxm/FHyH341ZrbnMUpe+5Bocte9xkmFMzPMjRaZMcXww+MpBptFvtU+79L362nqiLhekCxCxDPaUMBQ==
 
-eslint@^5.11.0:
-  version "5.11.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.11.0.tgz#51a0e70f137a425fe044cd48273b96f28a774b1f"
-  integrity sha512-gbEg0ttToZPkZUv2yYjpipxuYrv/9aSSmgM4V6GkiO3u04QosHYBtduUCqLEulEg3YvNDAkk3OWzyQJ/heZ3Nw==
+eslint@^5.11.1:
+  version "5.11.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.11.1.tgz#8deda83db9f354bf9d3f53f9677af7e0e13eadda"
+  integrity sha512-gOKhM8JwlFOc2acbOrkYR05NW8M6DCMSvfcJiBB5NDxRE1gv8kbvxKaC9u69e6ZGEMWXcswA/7eKR229cEIpvg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
     ajv "^6.5.3"