diff --git a/js/src/base-component.js b/js/src/base-component.js
index 51aaf0e6651b..7284ba48bf94 100644
--- a/js/src/base-component.js
+++ b/js/src/base-component.js
@@ -18,7 +18,7 @@ const VERSION = '5.0.0-beta2'
 
 class BaseComponent {
   constructor(element) {
-    element = typeof element === 'string' ? document.querySelector(element) : element
+    element = typeof element === 'string' ? getDocument().querySelector(element) : element
 
     if (!element) {
       return
diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index e5aad8940187..83c78163df09 100644
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -64,11 +64,11 @@ const Manipulator = {
 
   offset(element) {
     const rect = element.getBoundingClientRect()
-    const document = getDocument()
+    const documentRef = getDocument()
 
     return {
-      top: rect.top + document.body.scrollTop,
-      left: rect.left + document.body.scrollLeft
+      top: rect.top + documentRef.body.scrollTop,
+      left: rect.left + documentRef.body.scrollLeft
     }
   },
 
diff --git a/js/src/modal.js b/js/src/modal.js
index 5ea03a4a23cd..362656885670 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -468,7 +468,7 @@ class Modal extends BaseComponent {
   _setElementAttributes(selector, styleProp, callback) {
     SelectorEngine.find(selector)
       .forEach(element => {
-        if (element !== document.body && window.innerWidth > element.clientWidth + this._scrollbarWidth) {
+        if (element !== this._document.body && this._window.innerWidth > element.clientWidth + this._scrollbarWidth) {
           return
         }
 
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index 4b98565e2ce0..6208e49542d0 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -7,6 +7,7 @@
 
 import {
   defineJQueryPlugin,
+  getDocument,
   getElementFromSelector,
   getSelectorFromElement,
   getTransitionDurationFromElement,
@@ -107,7 +108,7 @@ class Offcanvas extends BaseComponent {
     this._element.style.visibility = 'visible'
 
     if (this._config.backdrop) {
-      document.body.classList.add(CLASS_NAME_BACKDROP_BODY)
+      this._document.body.classList.add(CLASS_NAME_BACKDROP_BODY)
     }
 
     if (!this._config.scroll) {
@@ -153,7 +154,7 @@ class Offcanvas extends BaseComponent {
       this._element.style.visibility = 'hidden'
 
       if (this._config.backdrop) {
-        document.body.classList.remove(CLASS_NAME_BACKDROP_BODY)
+        this._document.body.classList.remove(CLASS_NAME_BACKDROP_BODY)
       }
 
       if (!this._config.scroll) {
@@ -233,7 +234,7 @@ class Offcanvas extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+EventHandler.on(getDocument(), EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
   const target = getElementFromSelector(this)
 
   if (['A', 'AREA'].includes(this.tagName)) {
diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index d2f3919e6c7a..36eb85ff537d 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -7,18 +7,21 @@
 
 import SelectorEngine from '../dom/selector-engine'
 import Manipulator from '../dom/manipulator'
+import { getDocument, getWindow } from './index'
 
 const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed'
 const SELECTOR_STICKY_CONTENT = '.sticky-top'
+const windowRef = getWindow()
+const documentRef = getDocument()
 
 const getWidth = () => {
   // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth#usage_notes
-  const documentWidth = document.documentElement.clientWidth
-  return Math.abs(window.innerWidth - documentWidth)
+  const documentWidth = documentRef.documentElement.clientWidth
+  return Math.abs(getWindow().innerWidth - documentWidth)
 }
 
 const hide = (width = getWidth()) => {
-  document.body.style.overflow = 'hidden'
+  documentRef.body.style.overflow = 'hidden'
   _setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
   _setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
   _setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + width)
@@ -28,19 +31,19 @@ const _setElementAttributes = (selector, styleProp, callback) => {
   const scrollbarWidth = getWidth()
   SelectorEngine.find(selector)
     .forEach(element => {
-      if (element !== document.body && window.innerWidth > element.clientWidth + scrollbarWidth) {
+      if (element !== documentRef.body && windowRef.innerWidth > element.clientWidth + scrollbarWidth) {
         return
       }
 
       const actualValue = element.style[styleProp]
-      const calculatedValue = window.getComputedStyle(element)[styleProp]
+      const calculatedValue = windowRef.getComputedStyle(element)[styleProp]
       Manipulator.setDataAttribute(element, styleProp, actualValue)
       element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
     })
 }
 
 const reset = () => {
-  document.body.style.overflow = 'auto'
+  documentRef.body.style.overflow = 'auto'
   _resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
   _resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
   _resetElementAttributes('body', 'paddingRight')
@@ -49,7 +52,7 @@ const reset = () => {
 const _resetElementAttributes = (selector, styleProp) => {
   SelectorEngine.find(selector).forEach(element => {
     const value = Manipulator.getDataAttribute(element, styleProp)
-    if (typeof value === 'undefined' && element === document.body) {
+    if (typeof value === 'undefined' && element === documentRef.body) {
       element.style.removeProperty(styleProp)
     } else {
       Manipulator.removeDataAttribute(element, styleProp)