fix: Specify baseElement without container (#394)

* Add expected behavior of base element

* Fix expected behavior of baseElement

* Improve tests

Author: eps1lon

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(<div>Jekyll</div>, {
+    baseElement: treeA,
+  })
+  const {getByText: getByTextInB} = render(<div>Hyde</div>, {
+    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.',
+  )
+})

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(<div ref={ref} />)

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