fix(node): allow running in node environment (#114)

Now that jest-dom supports node environment I could add support for it to this package as well.

Fixes #100

Author: sheerun

.size-snapshot.json

@@ -1,7 +1,7 @@
 {
   "dist/dom-testing-library.umd.js": {
-    "bundled": 115443,
-    "minified": 50960,
-    "gzipped": 15294
+    "bundled": 144335,
+    "minified": 52790,
+    "gzipped": 15639
   }
 }

jest.config.js

@@ -1,5 +1,5 @@
 const jestConfig = require('kcd-scripts/jest')
 
 module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: 'jest-environment-node',
 })

package.json

@@ -27,8 +27,9 @@
     "build": "kcd-scripts build && kcd-scripts build --bundle umd --no-clean",
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test",
+    "test:all": "npm test && npm test -- --env jsdom",
     "test:update": "npm test -- --updateSnapshot --coverage",
-    "validate": "kcd-scripts validate",
+    "validate": "kcd-scripts validate build,lint,test:all",
     "setup": "npm install && npm run validate -s",
     "precommit": "kcd-scripts precommit",
     "dtslint": "dtslint typings"
@@ -38,14 +39,15 @@
     "typings"
   ],
   "dependencies": {
-    "mutationobserver-shim": "^0.3.2",
+    "@sheerun/mutationobserver-shim": "^0.3.2",
     "pretty-format": "^23.6.0",
     "wait-for-expect": "^1.0.0"
   },
   "devDependencies": {
     "dtslint": "^0.3.0",
-    "jest-dom": "^1.7.0",
+    "jest-dom": "^2.0.4",
     "jest-in-case": "^1.0.2",
+    "jsdom": "^12.2.0",
     "kcd-scripts": "^0.41.0",
     "microbundle": "^0.4.4"
   },

src/__tests__/element-queries.js

@@ -1,8 +1,9 @@
 import 'jest-dom/extend-expect'
 import {render} from './helpers/test-utils'
+import document from './helpers/document'
 
 beforeEach(() => {
-  window.Cypress = null
+  document.defaultView.Cypress = null
 })
 
 test('query can return null', () => {
@@ -148,9 +149,7 @@ test('get element by its alt text', () => {
       <img alt="finding nemo poster" src="/finding-nemo.png" />
     </div>,
   `)
-  expect(getByAltText(/fin.*nem.*poster$/i).src).toBe(
-    'http://localhost/finding-nemo.png',
-  )
+  expect(getByAltText(/fin.*nem.*poster$/i).src).toContain('/finding-nemo.png')
 })
 
 test('query/get element by its title', () => {
@@ -489,7 +488,7 @@ test('test the debug helper prints the dom state here', () => {
 })
 
 test('get throws a useful error message without DOM in Cypress', () => {
-  window.Cypress = {}
+  document.defaultView.Cypress = {}
   const {
     getByLabelText,
     getBySelectText,

src/__tests__/events.js

@@ -1,4 +1,5 @@
 import {fireEvent} from '..'
+import document from './helpers/document'
 
 const eventTypes = [
   {
@@ -171,7 +172,7 @@ test('assigning a value to a target that cannot have a value throws an error', (
 
 test('assigning the files property on an input', () => {
   const node = document.createElement('input')
-  const file = new File(['(⌐□_□)'], 'chucknorris.png', {
+  const file = new document.defaultView.File(['(⌐□_□)'], 'chucknorris.png', {
     type: 'image/png',
   })
   fireEvent.change(node, {target: {files: [file]}})

src/__tests__/example.js

@@ -2,6 +2,7 @@
 import {getByLabelText, getByText, getByTestId, queryByTestId, wait} from '../'
 // adds special assertions like toHaveTextContent
 import 'jest-dom/extend-expect'
+import document from './helpers/document'
 
 function getExampleDOM() {
   // This is just a raw example of setting up some DOM

src/__tests__/get-queries-for-element.js

@@ -1,5 +1,6 @@
 import {getQueriesForElement} from '../get-queries-for-element'
 import {queries} from '..'
+import document from './helpers/document'
 
 test('uses default queries', () => {
   const container = document.createElement('div')

src/__tests__/helpers/document.js

@@ -0,0 +1,35 @@
+let testWindow = typeof window === 'undefined' ? undefined : window
+
+if (typeof window === 'undefined') {
+  const {JSDOM} = require('jsdom')
+  const dom = new JSDOM()
+  testWindow = dom.window
+}
+
+// TODO: these events are not supported by JSDOM so we need to shim them
+
+if (!testWindow.ClipboardEvent) {
+  testWindow.ClipboardEvent = class ClipboardEvent extends testWindow.Event {}
+}
+
+if (!testWindow.DragEvent) {
+  testWindow.DragEvent = class DragEvent extends testWindow.Event {}
+}
+
+if (!testWindow.TransitionEvent) {
+  testWindow.TransitionEvent = class TransitionEvent extends testWindow.Event {}
+}
+
+if (!testWindow.AnimationEvent) {
+  testWindow.AnimationEvent = class AnimationEvent extends testWindow.Event {}
+}
+
+if (!testWindow.AnimationEvent) {
+  testWindow.AnimationEvent = class AnimationEvent extends testWindow.Event {}
+}
+
+if (!testWindow.InputEvent) {
+  testWindow.InputEvent = class InputEvent extends testWindow.Event {}
+}
+
+module.exports = testWindow.document

src/__tests__/helpers/test-utils.js

@@ -1,4 +1,5 @@
 import {getQueriesForElement} from '../../get-queries-for-element'
+import document from './document'
 
 function render(html) {
   const container = document.createElement('div')

src/__tests__/pretty-dom.js

@@ -1,5 +1,6 @@
 import {prettyDOM} from '../pretty-dom'
 import {render} from './helpers/test-utils'
+import document from './helpers/document'
 
 test('it prints out the given DOM element tree', () => {
   const {container} = render('<div>Hello World!</div>')