From 254164b64bb875763ce4432e944b043d8314c0a4 Mon Sep 17 00:00:00 2001
From: travis5491811 <41482601+travis5491811@users.noreply.github.com>
Date: Fri, 2 Apr 2021 12:09:05 -0400
Subject: [PATCH 1/2] Add example using props

Add example using props in reference to #1 in https://github.com/testing-library/vue-testing-library/issues/216#issuecomment-812368342
---
 docs/vue-testing-library/examples.mdx | 84 +++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx
index 33010d331..a3a9bd76c 100644
--- a/docs/vue-testing-library/examples.mdx
+++ b/docs/vue-testing-library/examples.mdx
@@ -92,6 +92,90 @@ test('properly handles v-model', async () => {
 })
 ```
 
+## Example using `props` and [`stubs`](https://vue-test-utils.vuejs.org/api/options.html#stubs) for thrid party compoents like `bootstrap-vue`:
+
+```html
+<template>
+  <b-row class="mb-1">
+    <b-col>
+      <label class="form-label mb-md-1">{{ label }}</label>
+
+      <b-form-input
+        type="text"
+        list="clist"
+        :disabled="isDisabled"
+        :placeholder="placeholder"
+        :value="value"
+        @input="$emit('input', $event)"
+      />
+
+      <datalist v-if="isSearchable" id="clist">
+        <option
+          v-for="(option, index) in searchOptions"
+          :key="index"
+          :value="option"
+        >
+          {{ option.suggestion }}
+        </option>
+      </datalist>
+    </b-col>
+  </b-row>
+</template>
+
+<script>
+export default {
+  name: 'FormInput',
+  props: {
+    label: { type: String, default: 'Default label' },
+    value: { type: String, default: '' },
+    inputType: { type: String, default: 'text' },
+    placeholder: { type: String, default: 'Default placeholder' },
+    searchOptions: {
+      type: Array,
+      default() {
+        return []
+      },
+    },
+    isSearchable: { type: Boolean, default: false },
+  },
+}
+</script>
+```
+
+```js
+import { render } from '@testing-library/vue'
+import { BRow, BCol, BFormInput } from 'bootstrap-vue'
+import FormInput from './FormInput.vue'
+const stubs = {
+  // used to register custom or third-party components
+  'b-form-input': BFormInput,
+  'b-row': BRow,
+  'b-col': BCol,
+}
+
+it('renders the correct default state', () => {
+  const { getByText } = render(FormInput, {
+    stubs,
+  })
+
+  // Asserts initial state.
+  getByText('Default label')
+})
+
+it('renders the label prop', () => {
+  const props = {
+    label: 'The new label',
+  }
+  const { getByText } = render(FormInput, {
+    stubs,
+    props,
+  })
+
+  getByText(props.label)
+})
+
+```
+
 ## More examples
 
 You'll find examples of testing with different libraries in

From 6207fe2adeb496f0942b167bd7dc6a140be6830d Mon Sep 17 00:00:00 2001
From: travis5491811 <41482601+travis5491811@users.noreply.github.com>
Date: Mon, 5 Apr 2021 14:54:08 -0400
Subject: [PATCH 2/2] Update examples.mdx

Simplify example to focus on props
---
 docs/vue-testing-library/examples.mdx | 53 +++------------------------
 1 file changed, 6 insertions(+), 47 deletions(-)

diff --git a/docs/vue-testing-library/examples.mdx b/docs/vue-testing-library/examples.mdx
index a3a9bd76c..1050c76be 100644
--- a/docs/vue-testing-library/examples.mdx
+++ b/docs/vue-testing-library/examples.mdx
@@ -92,51 +92,20 @@ test('properly handles v-model', async () => {
 })
 ```
 
-## Example using `props` and [`stubs`](https://vue-test-utils.vuejs.org/api/options.html#stubs) for thrid party compoents like `bootstrap-vue`:
+## Example using `props`:
 
 ```html
 <template>
-  <b-row class="mb-1">
-    <b-col>
-      <label class="form-label mb-md-1">{{ label }}</label>
-
-      <b-form-input
-        type="text"
-        list="clist"
-        :disabled="isDisabled"
-        :placeholder="placeholder"
-        :value="value"
-        @input="$emit('input', $event)"
-      />
-
-      <datalist v-if="isSearchable" id="clist">
-        <option
-          v-for="(option, index) in searchOptions"
-          :key="index"
-          :value="option"
-        >
-          {{ option.suggestion }}
-        </option>
-      </datalist>
-    </b-col>
-  </b-row>
+  <div>
+    <label>{{ label }}</label>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'FormInput',
   props: {
-    label: { type: String, default: 'Default label' },
-    value: { type: String, default: '' },
-    inputType: { type: String, default: 'text' },
-    placeholder: { type: String, default: 'Default placeholder' },
-    searchOptions: {
-      type: Array,
-      default() {
-        return []
-      },
-    },
-    isSearchable: { type: Boolean, default: false },
+    label: { type: String, default: 'Default label' }
   },
 }
 </script>
@@ -144,19 +113,10 @@ export default {
 
 ```js
 import { render } from '@testing-library/vue'
-import { BRow, BCol, BFormInput } from 'bootstrap-vue'
 import FormInput from './FormInput.vue'
-const stubs = {
-  // used to register custom or third-party components
-  'b-form-input': BFormInput,
-  'b-row': BRow,
-  'b-col': BCol,
-}
 
 it('renders the correct default state', () => {
-  const { getByText } = render(FormInput, {
-    stubs,
-  })
+  const { getByText } = render(FormInput)
 
   // Asserts initial state.
   getByText('Default label')
@@ -167,7 +127,6 @@ it('renders the label prop', () => {
     label: 'The new label',
   }
   const { getByText } = render(FormInput, {
-    stubs,
     props,
   })