diff --git a/build/build-plugins.js b/build/build-plugins.js
index bee6aa51fffd..cc9226c00094 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -34,7 +34,7 @@ const bsPlugins = {
   Alert: path.resolve(__dirname, '../js/src/alert/alert.js'),
   Button: path.resolve(__dirname, '../js/src/button/button.js'),
   Carousel: path.resolve(__dirname, '../js/src/carousel/carousel.js'),
-  Collapse: path.resolve(__dirname, '../js/src/collapse.js'),
+  Collapse: path.resolve(__dirname, '../js/src/collapse/collapse.js'),
   Dropdown: path.resolve(__dirname, '../js/src/dropdown.js'),
   Modal: path.resolve(__dirname, '../js/src/modal.js'),
   Popover: path.resolve(__dirname, '../js/src/popover.js'),
diff --git a/js/index.esm.js b/js/index.esm.js
index 4f5058560da7..bb8b7509e656 100644
--- a/js/index.esm.js
+++ b/js/index.esm.js
@@ -8,7 +8,7 @@
 import Alert from './src/alert/alert'
 import Button from './src/button/button'
 import Carousel from './src/carousel/carousel'
-import Collapse from './src/collapse'
+import Collapse from './src/collapse/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
 import Popover from './src/popover'
diff --git a/js/index.umd.js b/js/index.umd.js
index f3b81377e5a6..56f1a32a7db3 100644
--- a/js/index.umd.js
+++ b/js/index.umd.js
@@ -8,7 +8,7 @@
 import Alert from './src/alert/alert'
 import Button from './src/button/button'
 import Carousel from './src/carousel/carousel'
-import Collapse from './src/collapse'
+import Collapse from './src/collapse/collapse'
 import Dropdown from './src/dropdown'
 import Modal from './src/modal'
 import Popover from './src/popover'
diff --git a/js/src/collapse.js b/js/src/collapse/collapse.js
similarity index 98%
rename from js/src/collapse.js
rename to js/src/collapse/collapse.js
index 372869b6923e..0e4e29d7f3a4 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse/collapse.js
@@ -15,11 +15,11 @@ import {
   makeArray,
   reflow,
   typeCheckConfig
-} from './util/index'
-import Data from './dom/data'
-import EventHandler from './dom/eventHandler'
-import Manipulator from './dom/manipulator'
-import SelectorEngine from './dom/selectorEngine'
+} from '../util/index'
+import Data from '../dom/data'
+import EventHandler from '../dom/eventHandler'
+import Manipulator from '../dom/manipulator'
+import SelectorEngine from '../dom/selectorEngine'
 
 /**
  * ------------------------------------------------------------------------
@@ -431,7 +431,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
  * ------------------------------------------------------------------------
  * add .collapse to jQuery only if jQuery is present
  */
-
+/* istanbul ignore if */
 if (typeof $ !== 'undefined') {
   const JQUERY_NO_CONFLICT = $.fn[NAME]
   $.fn[NAME] = Collapse._jQueryInterface
diff --git a/js/src/collapse/collapse.spec.js b/js/src/collapse/collapse.spec.js
new file mode 100644
index 000000000000..a4d5c58b4ae5
--- /dev/null
+++ b/js/src/collapse/collapse.spec.js
@@ -0,0 +1,222 @@
+import Collapse from './collapse'
+import EventHandler from '../dom/eventHandler'
+
+/** Test helpers */
+import { getFixture, clearFixture } from '../../tests/helpers/fixture'
+
+describe('Collapse', () => {
+  let fixtureEl
+
+  beforeAll(() => {
+    fixtureEl = getFixture()
+  })
+
+  afterEach(() => {
+    clearFixture()
+  })
+
+  describe('VERSION', () => {
+    it('should return plugin version', () => {
+      expect(Collapse.VERSION).toEqual(jasmine.any(String))
+    })
+  })
+
+  describe('Default', () => {
+    it('should return plugin default config', () => {
+      expect(Collapse.Default).toEqual(jasmine.any(Object))
+    })
+  })
+
+  describe('toggle', () => {
+    it('should call show method if show class is not present', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl)
+
+      spyOn(collapse, 'show')
+
+      collapse.toggle()
+
+      expect(collapse.show).toHaveBeenCalled()
+    })
+
+    it('should call hide method if show class is present', () => {
+      fixtureEl.innerHTML = '<div class="show"></div>'
+
+      const collapseEl = fixtureEl.querySelector('.show')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      spyOn(collapse, 'hide')
+
+      collapse.toggle()
+
+      expect(collapse.hide).toHaveBeenCalled()
+    })
+  })
+
+  describe('show', () => {
+    it('should do nothing if is transitioning', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      spyOn(EventHandler, 'trigger')
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      collapse._isTransitioning = true
+      collapse.show()
+
+      expect(EventHandler.trigger).not.toHaveBeenCalled()
+    })
+
+    it('should do nothing if already shown', () => {
+      fixtureEl.innerHTML = '<div class="show"></div>'
+
+      spyOn(EventHandler, 'trigger')
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      collapse.show()
+
+      expect(EventHandler.trigger).not.toHaveBeenCalled()
+    })
+
+    it('should show a collapsed element', done => {
+      fixtureEl.innerHTML = '<div class="collapse" style="height: 0px;"></div>'
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      collapseEl.addEventListener('show.bs.collapse', () => {
+        expect(collapseEl.style.height).toEqual('0px')
+      })
+      collapseEl.addEventListener('shown.bs.collapse', () => {
+        expect(collapseEl.classList.contains('show')).toEqual(true)
+        expect(collapseEl.style.height).toEqual('')
+        done()
+      })
+
+      collapse.show()
+    })
+
+    it('should collapse only the first collapse', done => {
+      fixtureEl.innerHTML = [
+        '<div class="card" id="accordion1">',
+        '  <div id="collapse1" class="collapse"/>',
+        '</div>',
+        '<div class="card" id="accordion2">',
+        '  <div id="collapse2" class="collapse show"/>',
+        '</div>'
+      ].join('')
+
+      const el1 = fixtureEl.querySelector('#collapse1')
+      const el2 = fixtureEl.querySelector('#collapse2')
+      const collapse = new Collapse(el1, {
+        toggle: false
+      })
+
+      el1.addEventListener('shown.bs.collapse', () => {
+        expect(el1.classList.contains('show')).toEqual(true)
+        expect(el2.classList.contains('show')).toEqual(true)
+        done()
+      })
+
+      collapse.show()
+    })
+
+    it('should not fire shown when show is prevented', done => {
+      fixtureEl.innerHTML = '<div class="collapse"></div>'
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      const expectEnd = () => {
+        setTimeout(() => {
+          expect().nothing()
+          done()
+        }, 10)
+      }
+
+      collapseEl.addEventListener('show.bs.collapse', e => {
+        e.preventDefault()
+        expectEnd()
+      })
+
+      collapseEl.addEventListener('shown.bs.collapse', () => {
+        throw new Error('should not fire shown event')
+      })
+
+      collapse.show()
+    })
+  })
+
+  describe('hide', () => {
+    it('should hide a collapsed element', done => {
+      fixtureEl.innerHTML = '<div class="collapse show"></div>'
+
+      const collapseEl = fixtureEl.querySelector('div')
+      const collapse = new Collapse(collapseEl, {
+        toggle: false
+      })
+
+      collapseEl.addEventListener('hidden.bs.collapse', () => {
+        expect(collapseEl.classList.contains('show')).toEqual(false)
+        expect(collapseEl.style.height).toEqual('')
+        done()
+      })
+
+      collapse.hide()
+    })
+  })
+
+  describe('data-api', () => {
+    it('should show multiple collapsed elements', done => {
+      fixtureEl.innerHTML = [
+        '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
+        '<div id="collapse1" class="collapse multi"/>',
+        '<div id="collapse2" class="collapse multi"/>'
+      ].join('')
+
+      const trigger = fixtureEl.querySelector('a')
+      const collapse1 = fixtureEl.querySelector('#collapse1')
+      const collapse2 = fixtureEl.querySelector('#collapse2')
+
+      collapse2.addEventListener('shown.bs.collapse', () => {
+        expect(collapse1.classList.contains('show')).toEqual(true)
+        expect(collapse1.classList.contains('show')).toEqual(true)
+        done()
+      })
+
+      trigger.click()
+    })
+
+    it('should remove "collapsed" class from target when collapse is shown', done => {
+      fixtureEl.innerHTML = [
+        '<a role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1" />',
+        '<div id="test1"></div>'
+      ].join('')
+
+      const link = fixtureEl.querySelector('a')
+      const collapseTest1 = fixtureEl.querySelector('#test1')
+
+      collapseTest1.addEventListener('shown.bs.collapse', () => {
+        expect(link.classList.contains('collapsed')).toEqual(false)
+        done()
+      })
+
+      link.click()
+    })
+  })
+})
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index a051d4f5c63e..2a67880e0846 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -46,114 +46,6 @@ $(function () {
     assert.strictEqual($collapse[0], $el[0], 'collection contains element')
   })
 
-  QUnit.test('should show a collapsed element', function (assert) {
-    assert.expect(2)
-    var done = assert.async()
-    var $el = $('<div class="collapse"/>')
-
-    $el.one('shown.bs.collapse', function () {
-      assert.ok($el.hasClass('show'), 'has class "show"')
-      assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
-      done()
-    }).bootstrapCollapse('show')
-  })
-
-  QUnit.test('should show multiple collapsed elements', function (assert) {
-    assert.expect(4)
-    var done = assert.async()
-    var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href=".multi"/>').appendTo('#qunit-fixture')
-    var $el = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
-    var $el2 = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
-    $el.one('shown.bs.collapse', function () {
-      assert.ok($el.hasClass('show'), 'has class "show"')
-      assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
-    })
-    $el2.one('shown.bs.collapse', function () {
-      assert.ok($el2.hasClass('show'), 'has class "show"')
-      assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
-      done()
-    })
-    $target[0].click()
-  })
-
-  QUnit.test('should collapse only the first collapse', function (assert) {
-    assert.expect(2)
-    var done = assert.async()
-    var html = [
-      '<div class="panel-group" id="accordion1">',
-      '<div class="panel">',
-      '<div id="collapse1" class="collapse"/>',
-      '</div>',
-      '</div>',
-      '<div class="panel-group" id="accordion2">',
-      '<div class="panel">',
-      '<div id="collapse2" class="collapse show"/>',
-      '</div>',
-      '</div>'
-    ].join('')
-    $(html).appendTo('#qunit-fixture')
-    var $el1 = $('#collapse1')
-    var $el2 = $('#collapse2')
-    $el1.one('shown.bs.collapse', function () {
-      assert.ok($el1.hasClass('show'))
-      assert.ok($el2.hasClass('show'))
-      done()
-    }).bootstrapCollapse('show')
-  })
-
-  QUnit.test('should hide a collapsed element', function (assert) {
-    assert.expect(1)
-    var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
-
-    assert.ok(!$el.hasClass('show'), 'does not have class "show"')
-  })
-
-  QUnit.test('should not fire shown when show is prevented', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    $('<div class="collapse"/>')
-      .on('show.bs.collapse', function (e) {
-        e.preventDefault()
-        assert.ok(true, 'show event fired')
-        done()
-      })
-      .on('shown.bs.collapse', function () {
-        assert.ok(false, 'shown event fired')
-      })
-      .bootstrapCollapse('show')
-  })
-
-  QUnit.test('should reset style to auto after finishing opening collapse', function (assert) {
-    assert.expect(2)
-    var done = assert.async()
-
-    $('<div class="collapse" style="height: 0px"/>')
-      .on('show.bs.collapse', function () {
-        assert.strictEqual(this.style.height, '0px', 'height is 0px')
-      })
-      .on('shown.bs.collapse', function () {
-        assert.strictEqual(this.style.height, '', 'height is auto')
-        done()
-      })
-      .bootstrapCollapse('show')
-  })
-
-  QUnit.test('should reset style to auto after finishing closing collapse', function (assert) {
-    assert.expect(1)
-    var done = assert.async()
-
-    $('<div class="collapse"/>')
-      .on('shown.bs.collapse', function () {
-        $(this).bootstrapCollapse('hide')
-      })
-      .on('hidden.bs.collapse', function () {
-        assert.strictEqual(this.style.height, '', 'height is auto')
-        done()
-      })
-      .bootstrapCollapse('show')
-  })
-
   QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) {
     assert.expect(1)
     var done = assert.async()