feat: support for running in node environment (testing-library#125)

* Allow for running in node environment

* use jest projects

* remove unecessary code and add coverage checking

* fix coverage

* time is funny

Author: sheerun

.size-snapshot.json

@@ -1,7 +1,7 @@
 {
   "dist/dom-testing-library.umd.js": {
-    "bundled": 122519,
-    "minified": 52052,
-    "gzipped": 15632
+    "bundled": 146890,
+    "minified": 53947,
+    "gzipped": 15849
   }
 }

jest.config.js

@@ -1,5 +1,20 @@
-const jestConfig = require('kcd-scripts/jest')
+const baseConfig = require('kcd-scripts/jest')
 
-module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-jsdom',
-})
+module.exports = {
+  collectCoverageFrom: baseConfig.collectCoverageFrom,
+  coverageThreshold: baseConfig.coverageThreshold,
+  projects: [
+    {
+      ...baseConfig,
+      displayName: 'jsdom',
+      testEnvironment: 'jest-environment-jsdom',
+    },
+    {
+      ...baseConfig,
+      displayName: 'node',
+      testEnvironment: 'jest-environment-node',
+    },
+  ],
+  // this is for eslint
+  modulePaths: baseConfig.modulePaths,
+}

package.json

@@ -38,14 +38,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__/__snapshots__/wait-for-element.js.snap

@@ -79,3 +79,4 @@ exports[`it waits for the callback to return a value and only reacts to DOM muta
   />
 </div>
 `;
+

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', () => {
@@ -169,9 +170,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', () => {
@@ -510,7 +509,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,9 @@
+let testWindow = typeof window === 'undefined' ? undefined : window
+
+if (typeof window === 'undefined') {
+  const {JSDOM} = require('jsdom')
+  const dom = new JSDOM()
+  testWindow = dom.window
+}
+
+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>')

src/__tests__/wait-for-dom-change.js

@@ -2,6 +2,7 @@ import {waitForDomChange} from '../'
 // adds special assertions like toBeTruthy
 import 'jest-dom/extend-expect'
 import {render} from './helpers/test-utils'
+import document from './helpers/document'
 
 const skipSomeTime = delayMs =>
   new Promise(resolve => setTimeout(resolve, delayMs))
@@ -15,7 +16,11 @@ test('it waits for the next DOM mutation', async () => {
   const successHandler = jest.fn().mockName('successHandler')
   const errorHandler = jest.fn().mockName('errorHandler')
 
-  waitForDomChange().then(successHandler, errorHandler)
+  if (typeof window === 'undefined') {
+    waitForDomChange({container: document}).then(successHandler, errorHandler)
+  } else {
+    waitForDomChange().then(successHandler, errorHandler)
+  }
 
   // Promise callbacks are always asynchronous.
   expect(successHandler).toHaveBeenCalledTimes(0)
@@ -83,7 +88,14 @@ test('it throws if timeout is exceeded', async () => {
   const successHandler = jest.fn().mockName('successHandler')
   const errorHandler = jest.fn().mockName('errorHandler')
 
-  waitForDomChange({timeout: 70}).then(successHandler, errorHandler)
+  if (typeof window === 'undefined') {
+    waitForDomChange({container: document, timeout: 70}).then(
+      successHandler,
+      errorHandler,
+    )
+  } else {
+    waitForDomChange({timeout: 70}).then(successHandler, errorHandler)
+  }
 
   await skipSomeTimeForMutationObserver(100)
 

src/__tests__/wait-for-element.js

@@ -2,6 +2,7 @@ import {waitForElement, wait} from '../'
 // adds special assertions like toBeTruthy
 import 'jest-dom/extend-expect'
 import {render} from './helpers/test-utils'
+import document from './helpers/document'
 
 const skipSomeTime = delayMs =>
   new Promise(resolve => setTimeout(resolve, delayMs))
@@ -320,7 +321,14 @@ test('works if a container is not defined', async () => {
   const successHandler = jest.fn().mockName('successHandler')
   const errorHandler = jest.fn().mockName('errorHandler')
 
-  waitForElement(callback).then(successHandler, errorHandler)
+  if (typeof window === 'undefined') {
+    waitForElement(callback, {container: document}).then(
+      successHandler,
+      errorHandler,
+    )
+  } else {
+    waitForElement(callback).then(successHandler, errorHandler)
+  }
 
   await skipSomeTimeForMutationObserver()
 
@@ -342,7 +350,14 @@ test('throws an error if callback is not a function', async () => {
   const successHandler = jest.fn().mockName('successHandler')
   const errorHandler = jest.fn().mockName('errorHandler')
 
-  waitForElement().then(successHandler, errorHandler)
+  if (typeof window === 'undefined') {
+    waitForElement(undefined, {container: document}).then(
+      successHandler,
+      errorHandler,
+    )
+  } else {
+    waitForElement().then(successHandler, errorHandler)
+  }
 
   await skipSomeTimeForMutationObserver()
 

src/__tests__/wait.js

@@ -20,6 +20,6 @@ test('can just be used for a next tick thing', async () => {
   const after = Date.now()
   // if it's greater than 50 then `wait` used a timeout
   // but it should have resolved sooner. It really should be 0
-  expect(after - before).not.toBeGreaterThan(50)
+  expect(after - before).not.toBeGreaterThan(60)
   expect(spy).toHaveBeenCalledTimes(1)
 })