diff --git a/src/components/form/fixtures/form-row.html b/src/components/form/fixtures/form-row.html
deleted file mode 100644
index 4a20d9ad563..00000000000
--- a/src/components/form/fixtures/form-row.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div id="app">
-    <!-- default -->
-    <b-form-row ref="default">default</b-form-row>
-    <br>
-    <!-- custom tag -->
-    <b-form-row tag="p" ref="custom">custom</b-form-row>
-</div>
diff --git a/src/components/form/fixtures/form-row.js b/src/components/form/fixtures/form-row.js
deleted file mode 100644
index 0bae7b95202..00000000000
--- a/src/components/form/fixtures/form-row.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
-  el: '#app'
-})
diff --git a/src/components/form/fixtures/form-text.html b/src/components/form/fixtures/form-text.html
deleted file mode 100644
index ef374375d94..00000000000
--- a/src/components/form/fixtures/form-text.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div id="app">
-    <!-- default -->
-    <b-form-text ref="default" id="default">default</b-form-text>
-    <br>
-    <!-- custom tag -->
-    <b-form-text tag="p" ref="custom">custom</b-form-text>
-    <br>
-    <!-- text variant -->
-    <b-form-text text-variant="danger" ref="variant">variant</b-form-text>
-    <br>
-    <!-- inline -->
-    <b-form-text inline ref="inline">inline</b-form-text>
-</div>
diff --git a/src/components/form/fixtures/form-text.js b/src/components/form/fixtures/form-text.js
deleted file mode 100644
index 0bae7b95202..00000000000
--- a/src/components/form/fixtures/form-text.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
-  el: '#app'
-})
diff --git a/src/components/form/fixtures/form.html b/src/components/form/fixtures/form.html
deleted file mode 100644
index b05fde2bcf9..00000000000
--- a/src/components/form/fixtures/form.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div id="app">
-  <!-- default -->
-  <b-form ref="default">default</b-form>
-  <br>
-  <b-form ref="inline" inline>inline</b-form>
-  <br>
-  <b-form ref="browser" novalidate>browser</b-form>
-  <br>
-  <b-form ref="validated" validated>validation</b-form>
-</div>
diff --git a/src/components/form/fixtures/form.js b/src/components/form/fixtures/form.js
deleted file mode 100644
index 0bae7b95202..00000000000
--- a/src/components/form/fixtures/form.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
-  el: '#app'
-})
diff --git a/src/components/form/form-row.spec.js b/src/components/form/form-row.spec.js
index 0a18a03aaca..db52d1b342c 100644
--- a/src/components/form/form-row.spec.js
+++ b/src/components/form/form-row.spec.js
@@ -1,48 +1,12 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import FormRow from './form-row'
+import { mount } from '@vue/test-utils'
 
-describe('form-row', () => {
-  beforeEach(loadFixture(__dirname, 'form-row'))
-  testVM()
+// This component is also fully tested under the layout tests
 
-  it('default should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('form-row')
-  })
-
-  it('custom should contain base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toHaveClass('form-row')
-  })
-
-  it('default should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default.textContent).toContain('default')
-  })
-
-  it('custom should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom.textContent).toContain('custom')
-  })
-
-  it('default should have tag div', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toBeElement('div')
-  })
-
-  it('custom should have tag p', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toBeElement('p')
+describe('form > form-row', () => {
+  it('works', () => {
+    const wrapper = mount(FormRow)
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('form-row')
   })
 })
diff --git a/src/components/form/form-text.spec.js b/src/components/form/form-text.spec.js
index fbbeed68ff9..c6864047b7d 100644
--- a/src/components/form/form-text.spec.js
+++ b/src/components/form/form-text.spec.js
@@ -1,104 +1,81 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import FormText from './form-text'
+import { mount } from '@vue/test-utils'
 
-describe('form-text', () => {
-  beforeEach(loadFixture(__dirname, 'form-text'))
-  testVM()
+describe('form > form-text', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(FormText)
 
-  it('default should be tag small', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toBeElement('small')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 
-  it('default should have id', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default.getAttribute('id')).toBe('default')
-  })
-
-  it('default should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('form-text')
-  })
+  it('renders default slot content', async () => {
+    const wrapper = mount(FormText, {
+      slots: {
+        default: 'foobar'
+      }
+    })
 
-  it('default should have muted variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default).toHaveClass('text-muted')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('foobar')
   })
 
-  it('default should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.default.textContent).toContain('default')
-  })
+  it('renders custom root element when prop tag set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        tag: 'p'
+      }
+    })
 
-  it('custom should be tag p', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toBeElement('p')
+    expect(wrapper.is('p')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 
-  it('custom should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom).toHaveClass('form-text')
-  })
+  it('has user supplied ID', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        id: 'foo'
+      }
+    })
 
-  it('custom should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.custom.textContent).toContain('custom')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.attributes('id')).toBeDefined()
+    expect(wrapper.attributes('id')).toEqual('foo')
   })
 
-  it('variant should have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant).toHaveClass('form-text')
-  })
+  it('does not have class form-text when prop inline set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        inline: true
+      }
+    })
 
-  it('variant should have danger variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant).toHaveClass('text-danger')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).not.toContain('form-text')
+    expect(wrapper.classes()).toContain('text-muted')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it('variant should have danger variant', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.variant.textContent).toContain('variant')
-  })
-
-  it('inline should not have base class', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline).not.toHaveClass('form-text')
-  })
-
-  it('inline should have variant muted', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline).toHaveClass('text-muted')
-  })
+  it('has variant class applied when prop text-variant is set', async () => {
+    const wrapper = mount(FormText, {
+      propsData: {
+        textVariant: 'info'
+      }
+    })
 
-  it('inline should have content', async () => {
-    const {
-      app: { $refs }
-    } = window
-    expect($refs.inline.textContent).toContain('inline')
+    expect(wrapper.is('small')).toBe(true)
+    expect(wrapper.classes()).toContain('form-text')
+    expect(wrapper.classes()).toContain('text-info')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toEqual('')
   })
 })
diff --git a/src/components/form/form.spec.js b/src/components/form/form.spec.js
index b7ecf021b95..794a56ca8a8 100644
--- a/src/components/form/form.spec.js
+++ b/src/components/form/form.spec.js
@@ -1,6 +1,85 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import Form from './form'
+import { mount } from '@vue/test-utils'
 
 describe('form', () => {
-  beforeEach(loadFixture(__dirname, 'form'))
-  testVM()
+  it('has expected default structure', async () => {
+    const wrapper = mount(Form)
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(Form, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('foobar')
+  })
+
+  it('has class form-inline when prop inline set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        inline: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('form-inline')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has class was-validation when prop validated set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        validated: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('was-validated')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has user supplied id', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        id: 'foo'
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).toBeDefined()
+    expect(wrapper.attributes('id')).toEqual('foo')
+    expect(wrapper.attributes('novalidate')).not.toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('has attribute novalidate when prop novalidate set', async () => {
+    const wrapper = mount(Form, {
+      propsData: {
+        novalidate: true
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('id')).not.toBeDefined()
+    expect(wrapper.attributes('novalidate')).toBeDefined()
+    expect(wrapper.text()).toEqual('')
+  })
 })
diff --git a/src/components/image/img-lazy.spec.js b/src/components/image/img-lazy.spec.js
index 67111481a88..78eb710abcc 100644
--- a/src/components/image/img-lazy.spec.js
+++ b/src/components/image/img-lazy.spec.js
@@ -15,6 +15,21 @@ describe('img-lazy', () => {
     wrapper.destroy()
   })
 
+  it('is initially shown show prop is set', async () => {
+    const wrapper = mount(ImgLazy, {
+      propsData: {
+        src: src,
+        show: true
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toBe(src)
+
+    wrapper.destroy()
+  })
+
   it('shows when show prop is set', async () => {
     const wrapper = mount(ImgLazy, {
       propsData: {
diff --git a/src/components/image/img.spec.js b/src/components/image/img.spec.js
index a9176c5e78f..68f2b6301d8 100644
--- a/src/components/image/img.spec.js
+++ b/src/components/image/img.spec.js
@@ -1,158 +1,193 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import Img from './img'
+import { mount } from '@vue/test-utils'
 
 describe('img', () => {
-  beforeEach(loadFixture(__dirname, 'image'))
-  testVM()
-
-  it("all should be rendered with an 'img' tag", async () => {
-    const {
-      app: { $refs }
-    } = window
-    ;[
-      'default',
-      'fluid',
-      'thumbnail',
-      'rounded',
-      'roundedTop',
-      'left',
-      'right',
-      'center',
-      'blank',
-      'blankSize',
-      'blankSrc'
-    ].forEach(ref => {
-      const img = $refs[ref]
-      expect(img).toBeDefined()
-      expect(img).toBeElement('img')
-    })
+  it('has expected default structure', async () => {
+    const wrapper = mount(Img)
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes().length).toBe(0)
+    expect(wrapper.attributes('width')).not.toBeDefined()
+    expect(wrapper.attributes('height')).not.toBeDefined()
   })
 
-  it("all but blanks should  have 'src' starting with 'https://picsum.photos'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    ;['default', 'fluid', 'thumbnail', 'rounded', 'roundedTop', 'left', 'right', 'center'].forEach(
-      ref => {
-        const img = $refs[ref]
-        expect(img).toBeDefined()
-        expect(img.getAttribute('src')).toContain('https://picsum.photos')
+  it('has src attribute when prop src is set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar'
       }
-    )
-    ;['blank', 'blankSize', 'blankSrc'].forEach(ref => {
-      const img = $refs[ref]
-      expect(img).toBeDefined()
-      expect(img.getAttribute('src')).not.toContain('https://picsum.photos')
     })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.attributes('width')).not.toBeDefined()
+    expect(wrapper.attributes('height')).not.toBeDefined()
   })
 
-  it('default should not have any classes', async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.default
-    expect(img).toBeDefined()
-    expect(img.className).toBe('')
+  it('should have class "img-fluid" when prop fluid set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        fluid: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('img-fluid')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it("fluid should have class 'img-fluid'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.fluid
-    expect(img).toBeDefined()
-    expect(img).toHaveClass('img-fluid')
+  it('should have class "img-fluid" and "w-100" when prop fluid-grow set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        fluidGrow: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('img-fluid')
+    expect(wrapper.classes()).toContain('w-100')
+    expect(wrapper.classes().length).toBe(2)
   })
 
-  it("thumbnail should have class 'img-thumbnail'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.thumbnail
-    expect(img).toBeDefined()
-    expect(img).toHaveClass('img-thumbnail')
+  it('should have class "img-thumbnail" when prop thumbnail set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        thumbnail: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('img-thumbnail')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it("left should have class 'float-left'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.left
-    expect(img).toBeDefined()
-    expect(img).toHaveClass('float-left')
+  it('should have class "rounded" when prop rounded true', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        rounded: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('rounded')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it("right should have class 'float-right'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.right
-    expect(img).toBeDefined()
-    expect(img).toHaveClass('float-right')
+  it('should have class "rounded-circle" when prop rounded=circle', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        rounded: 'circle'
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('rounded-circle')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it("center should have classes 'mx-auto' and 'd-block'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.center
-    expect(img).toBeDefined()
-    expect(img).toHaveClass('mx-auto')
-    expect(img).toHaveClass('d-block')
+  it('should have class "float-left" when prop left set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        left: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('float-left')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it('blank should have data URI as SRC', async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blank
-    expect(img).toBeDefined()
-    expect(img.getAttribute('src')).toContain('data:image/svg+xml;charset=UTF-8,')
+  it('should have class "float-right" when prop right set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        right: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('float-right')
+    expect(wrapper.classes().length).toBe(1)
   })
 
-  it("blank should have width and height set to '1'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blank
-    expect(img).toBeDefined()
-    expect(img.getAttribute('width')).toBe('1')
-    expect(img.getAttribute('height')).toBe('1')
+  it('should have classes "mx-auto" and "d-block" when prop center set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        center: true
+      }
+    })
+
+    expect(wrapper.is('img')).toBe(true)
+    expect(wrapper.classes()).toContain('mx-auto')
+    expect(wrapper.classes()).toContain('d-block')
+    expect(wrapper.classes().length).toBe(2)
   })
 
-  it('blankSize should have data URI as SRC', async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blankSize
-    expect(img).toBeDefined()
-    expect(img.getAttribute('src')).toContain('data:image/svg+xml;charset=UTF-8,')
+  it('has data URI when blank is true', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        blank: true
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
+    expect(wrapper.attributes('width')).toBe('1')
+    expect(wrapper.attributes('height')).toBe('1')
   })
 
-  it("blankSize should have color 'blue'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blankSize
-    expect(img).toBeDefined()
-    expect(img.getAttribute('src')).toContain('blue')
+  it('has color when blank is true and blank-color set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        blank: true,
+        blankColor: 'blue'
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
+    expect(wrapper.attributes('src')).toContain('blue')
   })
 
-  it("blankSize should have width set to '200' and height set to '250'", async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blankSize
-    expect(img).toBeDefined()
-    expect(img.getAttribute('width')).toBe('200')
-    expect(img.getAttribute('height')).toBe('250')
+  it('has width and height when blank is true and width/height props set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        blank: true,
+        width: 300,
+        height: 200
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toContain('data:image/svg+xml;charset=UTF-8')
+    expect(wrapper.attributes('width')).toBe('300')
+    expect(wrapper.attributes('height')).toBe('200')
   })
 
-  it('blankSrc should have data URI as SRC', async () => {
-    const {
-      app: { $refs }
-    } = window
-    const img = $refs.blankSrc
-    expect(img).toBeDefined()
-    expect(img.getAttribute('src')).toContain('data:image/svg+xml;charset=UTF-8,')
+  it('has width and height when src set and width/height props set', async () => {
+    const wrapper = mount(Img, {
+      propsData: {
+        src: '/foo/bar',
+        width: 300,
+        height: 200
+      }
+    })
+    expect(wrapper.is('img')).toBe(true)
+
+    expect(wrapper.attributes('src')).toBeDefined()
+    expect(wrapper.attributes('src')).toEqual('/foo/bar')
+    expect(wrapper.attributes('width')).toBe('300')
+    expect(wrapper.attributes('height')).toBe('200')
   })
 })
diff --git a/src/components/nav/fixtures/nav.html b/src/components/nav/fixtures/nav.html
deleted file mode 100644
index 56e1f31b105..00000000000
--- a/src/components/nav/fixtures/nav.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<div id="app">
-    <b-nav>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item>Link</b-nav-item>
-        <b-nav-item>Another Link</b-nav-item>
-        <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav tabs>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item>Link</b-nav-item>
-        <b-nav-item>Another Link</b-nav-item>
-        <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav pills>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item>Link</b-nav-item>
-        <b-nav-item>Another Link</b-nav-item>
-        <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item-dropdown text="Menu">
-            <b-dropdown-item>one</b-dropdown-item>
-            <b-dropdown-item>two</b-dropdown-item>
-        </b-nav-item-dropdown>
-        <b-nav-text>Text Item</b-nav-text>
-        <b-nav-form><b-input placeholder="input"></b-input></b-nav-form>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav tabs fill>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item>Link</b-nav-item>
-        <b-nav-item>Another Link</b-nav-item>
-        <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav tabs justified>
-        <b-nav-item active>Active</b-nav-item>
-        <b-nav-item>Link</b-nav-item>
-        <b-nav-item>Another Link</b-nav-item>
-        <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-
-    <br><br>
-
-    <b-nav vertical class="w-25">
-      <b-nav-item active>Active</b-nav-item>
-      <b-nav-item>Link</b-nav-item>
-      <b-nav-item>Another Link</b-nav-item>
-      <b-nav-item disabled>Disabled</b-nav-item>
-    </b-nav>
-</div>
diff --git a/src/components/nav/fixtures/nav.js b/src/components/nav/fixtures/nav.js
deleted file mode 100644
index 0bae7b95202..00000000000
--- a/src/components/nav/fixtures/nav.js
+++ /dev/null
@@ -1,3 +0,0 @@
-window.app = new Vue({
-  el: '#app'
-})
diff --git a/src/components/nav/nav-form.spec.js b/src/components/nav/nav-form.spec.js
new file mode 100644
index 00000000000..9d513ecef89
--- /dev/null
+++ b/src/components/nav/nav-form.spec.js
@@ -0,0 +1,26 @@
+import NavForm from './nav-form'
+import { mount } from '@vue/test-utils'
+
+describe('nav > nav-form', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(NavForm)
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('form-inline')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(NavForm, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.is('form')).toBe(true)
+    expect(wrapper.classes()).toContain('form-inline')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('foobar')
+  })
+})
diff --git a/src/components/nav/nav-text.spec.js b/src/components/nav/nav-text.spec.js
new file mode 100644
index 00000000000..feaf84e2cce
--- /dev/null
+++ b/src/components/nav/nav-text.spec.js
@@ -0,0 +1,39 @@
+import NavText from './nav-text'
+import { mount } from '@vue/test-utils'
+
+describe('nav > nav-text', () => {
+  it('has expected default structure', async () => {
+    const wrapper = mount(NavText)
+
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-text')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders custom root element when prop tag is set', async () => {
+    const wrapper = mount(NavText, {
+      propsData: {
+        tag: 'div'
+      }
+    })
+
+    expect(wrapper.is('div')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-text')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('')
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(NavText, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.is('span')).toBe(true)
+    expect(wrapper.classes()).toContain('navbar-text')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toEqual('foobar')
+  })
+})
diff --git a/src/components/nav/nav.spec.js b/src/components/nav/nav.spec.js
index 247f78beab6..3858210cf60 100644
--- a/src/components/nav/nav.spec.js
+++ b/src/components/nav/nav.spec.js
@@ -1,6 +1,109 @@
-import { loadFixture, testVM } from '../../../tests/utils'
+import Nav from './nav'
+import { mount } from '@vue/test-utils'
 
 describe('nav', () => {
-  beforeEach(loadFixture(__dirname, 'nav'))
-  testVM()
+  it('has expected default structure', async () => {
+    const wrapper = mount(Nav)
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('renders custom root element when prop tag set', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        tag: 'ol'
+      }
+    })
+
+    expect(wrapper.is('ol')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('renders default slot content', async () => {
+    const wrapper = mount(Nav, {
+      slots: {
+        default: 'foobar'
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes().length).toBe(1)
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('applies pill style', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        pills: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-pills')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies tab style', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        tabs: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-tabs')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies flex-column style when vertical', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        vertical: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('flex-column')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies justify style when justified', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        justified: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-justified')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('applies fill style style when fill set', async () => {
+    const wrapper = mount(Nav, {
+      propsData: {
+        fill: true
+      }
+    })
+
+    expect(wrapper.is('ul')).toBe(true)
+    expect(wrapper.classes()).toContain('nav')
+    expect(wrapper.classes()).toContain('nav-fill')
+    expect(wrapper.classes().length).toBe(2)
+    expect(wrapper.text()).toBe('')
+  })
 })