diff --git a/react/Modal/index.spec.jsx b/react/Modal/index.spec.jsx
new file mode 100644
index 0000000000..7991c6989b
--- /dev/null
+++ b/react/Modal/index.spec.jsx
@@ -0,0 +1,73 @@
+import React from 'react'
+import { act } from 'react-dom/test-utils'
+import { useState } from 'react'
+import { mount } from 'enzyme'
+import Modal, { BODY_CLASS } from './index'
+
+describe('Modal', () => {
+ const Example = () => {
+ const [showModal, setShowModal] = useState(false)
+ const [showModal2, setShowModal2] = useState(false)
+ return (
+
+ {showModal ? 1 : null}
+ {showModal2 ? 2 : null}
+
+ )
+ }
+
+ const clickNthButton = (root, n) =>
+ root
+ .find('button')
+ .at(n)
+ .props()
+ .onClick()
+
+ const mountFirstModal = root => clickNthButton(root, 0)
+ const mountSecondModal = root => clickNthButton(root, 1)
+ const unmountSecondModal = root => clickNthButton(root, 2)
+ const unmountFirstModal = root => clickNthButton(root, 3)
+
+ const hasModalBodyClass = () => document.body.classList.contains(BODY_CLASS)
+
+ afterEach(() => {
+ document.body.classList.remove(BODY_CLASS)
+ })
+
+ it('should apply a class to the body when mounted', () => {
+ const root = mount()
+ expect(hasModalBodyClass()).toBe(false)
+ act(() => {
+ mountFirstModal(root)
+ })
+ expect(hasModalBodyClass()).toBe(true)
+ act(() => {
+ unmountFirstModal(root)
+ })
+ expect(hasModalBodyClass()).toBe(false)
+ })
+
+ it('should not remove the class if two modals were mounted and the second one is removed', () => {
+ const root = mount()
+ expect(hasModalBodyClass()).toBe(false)
+ act(() => {
+ mountFirstModal(root)
+ })
+ expect(hasModalBodyClass()).toBe(true)
+ act(() => {
+ mountSecondModal(root)
+ })
+ act(() => {
+ unmountSecondModal(root)
+ })
+ expect(hasModalBodyClass()).toBe(true)
+ act(() => {
+ unmountFirstModal(root)
+ })
+ expect(hasModalBodyClass()).toBe(false)
+ })
+})