Prepare DOM globals in test setup

.mocharc.js

@@ -1,6 +1,7 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'test';
 
 module.exports = {
-  require: ['@babel/register', 'spec/javascripts/spec_helper.js'],
+  require: ['@babel/register'],
+  file: 'spec/javascripts/spec_helper.js',
   extension: ['js', 'jsx'],
 };

spec/javascripts/app/document-capture/components/acuant-capture-spec.jsx

@@ -3,11 +3,8 @@ import { render, fireEvent, cleanup } from '@testing-library/react';
 import sinon from 'sinon';
 import AcuantCapture from '../../../../../app/javascript/app/document-capture/components/acuant-capture';
 import { Provider as AcuantContextProvider } from '../../../../../app/javascript/app/document-capture/context/acuant';
-import { useDOM } from '../../../support/dom';
 
 describe('document-capture/components/acuant-capture', () => {
-  useDOM();
-
   afterEach(() => {
     // While RTL will perform this automatically, it must to occur prior to
     // resetting the global variables, since otherwise the component's effect

spec/javascripts/app/document-capture/components/document-capture-spec.jsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import DocumentCapture from '../../../../../app/javascript/app/document-capture/components/document-capture';
-import { useDOM } from '../../../support/dom';
 
 describe('document-capture/components/document-capture', () => {
-  useDOM();
-
   it('renders a heading', () => {
     const { getByText } = render(<DocumentCapture />);
 

spec/javascripts/app/document-capture/context/acuant.jsx

@@ -3,11 +3,8 @@ import { render } from '@testing-library/react';
 import AcuantContext, {
   Provider as AcuantContextProvider,
 } from '../../../../../app/javascript/app/document-capture/context/acuant';
-import { useDOM } from '../../../support/dom';
 
 describe('document-capture/context/acuant', () => {
-  useDOM();
-
   afterEach(() => {
     delete window.AcuantJavascriptWebSdk;
   });

spec/javascripts/app/document-capture/context/i18n-spec.jsx

@@ -1,11 +1,8 @@
 import React, { useContext } from 'react';
 import { render } from '@testing-library/react';
 import I18nContext from '../../../../../app/javascript/app/document-capture/context/i18n';
-import { useDOM } from '../../../support/dom';
 
 describe('document-capture/context/i18n', () => {
-  useDOM();
-
   const ContextValue = () => JSON.stringify(useContext(I18nContext));
 
   it('defaults to empty object', () => {

spec/javascripts/app/document-capture/hooks/use-i18n-spec.jsx

@@ -2,11 +2,8 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import I18nContext from '../../../../../app/javascript/app/document-capture/context/i18n';
 import useI18n from '../../../../../app/javascript/app/document-capture/hooks/use-i18n';
-import { useDOM } from '../../../support/dom';
 
 describe('document-capture/hooks/use-i18n', () => {
-  useDOM();
-
   const LocalizedString = ({ stringKey }) => useI18n()(stringKey);
 
   it('returns localized key value', () => {

spec/javascripts/spec_helper.js

@@ -1,5 +1,20 @@
 const chai = require('chai');
 const dirtyChai = require('dirty-chai');
+const { JSDOM } = require('jsdom');
 
 chai.use(dirtyChai);
 global.expect = chai.expect;
+
+// Emulate a DOM, since many modules will assume the presence of these globals
+// exist as a side effect of their import (focus-trap, classList.js, etc).
+const dom = new JSDOM();
+global.window = dom.window;
+global.navigator = window.navigator;
+global.document = window.document;
+global.self = window;
+
+beforeEach(() => {
+  while (document.body.firstChild) {
+    document.body.removeChild(document.body.firstChild);
+  }
+});

spec/javascripts/support/acuant/document_capture_dom.js

@@ -39,13 +39,23 @@ const INITIAL_HTML = `
 </p>
 `;
 
+let originalWindow;
+let originalDocument;
+
 export const setupDocumentCaptureTestDOM = () => {
+  originalWindow = global.window;
+  originalDocument = global.document;
+
+  // While there's already DOM globals, the current implementation assumes a
+  // cleanly initialized DOM in every test case. Ideally all event handlers
+  // attached to the DOM in the course of a test case would be cleaned up, and
+  // the same DOM could be reused for every test.
   const dom = new JSDOM(INITIAL_HTML);
   global.window = dom.window;
   global.document = global.window.document;
 };
 
 export const teardownDocumentCaptureTestDOM = () => {
-  global.window = undefined;
-  global.document = undefined;
+  global.window = originalWindow;
+  global.document = originalDocument;
 };