diff --git a/src/__tests__/multi-base.js b/src/__tests__/multi-base.js
new file mode 100644
index 00000000..03f0d93e
--- /dev/null
+++ b/src/__tests__/multi-base.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import {render, cleanup} from '../'
+
+// these are created once per test suite and reused for each case
+let treeA, treeB
+beforeAll(() => {
+ treeA = document.createElement('div')
+ treeB = document.createElement('div')
+ document.body.appendChild(treeA)
+ document.body.appendChild(treeB)
+})
+
+afterAll(() => {
+ treeA.parentNode.removeChild(treeA)
+ treeB.parentNode.removeChild(treeB)
+})
+
+afterEach(cleanup)
+
+test('baseElement isolates trees from one another', () => {
+ const {getByText: getByTextInA} = render(
Jekyll
, {
+ baseElement: treeA,
+ })
+ const {getByText: getByTextInB} = render(Hyde
, {
+ baseElement: treeB,
+ })
+
+ expect(() => getByTextInA('Jekyll')).not.toThrow(
+ 'Unable to find an element with the text: Jekyll.',
+ )
+ expect(() => getByTextInB('Jekyll')).toThrow(
+ 'Unable to find an element with the text: Jekyll.',
+ )
+
+ expect(() => getByTextInA('Hyde')).toThrow(
+ 'Unable to find an element with the text: Hyde.',
+ )
+ expect(() => getByTextInB('Hyde')).not.toThrow(
+ 'Unable to find an element with the text: Hyde.',
+ )
+})
diff --git a/src/__tests__/render.js b/src/__tests__/render.js
index f8bed704..4fdf8dc0 100644
--- a/src/__tests__/render.js
+++ b/src/__tests__/render.js
@@ -3,8 +3,6 @@ import React from 'react'
import ReactDOM from 'react-dom'
import {render, cleanup} from '../'
-afterEach(cleanup)
-
test('renders div into document', () => {
const ref = React.createRef()
const {container} = render()
diff --git a/src/index.js b/src/index.js
index 8192e169..4565074b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -30,11 +30,13 @@ function render(
wrapper: WrapperComponent,
} = {},
) {
- if (!container) {
+ if (!baseElement) {
// default to document.body instead of documentElement to avoid output of potentially-large
// head elements (such as JSS style blocks) in debug output
baseElement = document.body
- container = document.body.appendChild(document.createElement('div'))
+ }
+ if (!container) {
+ container = baseElement.appendChild(document.createElement('div'))
}
// we'll add it to the mounted containers regardless of whether it's actually