chore: add tests for jsdom environment

Kent C. Dodds · Kent C. Dodds · commit c4b4efffb192 · 2019-06-18T16:46:00.000-06:00
diff --git a/jest.config.js b/jest.config.js
@@ -1,6 +1,20 @@
-const baseConfig = require('kcd-scripts/jest')
+const {
+  collectCoverageFrom,
+  coveragePathIgnorePatterns,
+  coverageThreshold,
+  watchPlugins,
+} = require('kcd-scripts/jest')
 
 module.exports = {
-  ...baseConfig,
-  testEnvironment: 'jest-environment-jsdom',
+  collectCoverageFrom,
+  coveragePathIgnorePatterns,
+  coverageThreshold,
+  watchPlugins: [
+    ...watchPlugins,
+    require.resolve('jest-watch-select-projects'),
+  ],
+  projects: [
+    require.resolve('./tests/jest.config.dom.js'),
+    require.resolve('./tests/jest.config.node.js'),
+  ],
 }
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "lint": "kcd-scripts lint",
     "test": "kcd-scripts test",
     "test:update": "npm test -- --updateSnapshot --coverage",
+    "test:debug": "node --inspect-brk ./node_modules/.bin/jest --watch --runInBand",
     "validate": "kcd-scripts validate",
     "setup": "npm install && npm run validate -s",
     "dtslint": "dtslint typings"
@@ -52,6 +53,8 @@
     "dtslint": "^0.7.7",
     "jest-dom": "^3.4.0",
     "jest-in-case": "^1.0.2",
+    "jest-watch-select-projects": "^0.1.1",
+    "jsdom": "^15.1.1",
     "kcd-scripts": "^1.4.0"
   },
   "eslintConfig": {
diff --git a/src/__node_tests__/index.js b/src/__node_tests__/index.js
@@ -0,0 +1,49 @@
+import {JSDOM} from 'jsdom'
+import * as dtl from '../'
+
+test('works without a global dom', async () => {
+  const container = new JSDOM(`
+    <html>
+      <body>
+        <form id="login-form">
+          <label for="username">Username</label>
+          <input id="username" />
+          <label for="password">Password</label>
+          <input id="password" type="password" />
+          <button type="submit">Submit</button>
+          <div id="data-container"></div>
+        </form>
+      </body>
+    </html>
+  `).window.document.body
+  container.querySelector('#login-form').addEventListener('submit', e => {
+    e.preventDefault()
+    const {username, password} = e.target.elements
+    setTimeout(() => {
+      const dataContainer = container.querySelector('#data-container')
+      const pre = container.ownerDocument.createElement('pre')
+      pre.dataset.testid = 'submitted-data'
+      pre.textContent = JSON.stringify({
+        username: username.value,
+        password: password.value,
+      })
+      dataContainer.appendChild(pre)
+    }, 20)
+  })
+
+  const fakeUser = {username: 'chucknorris', password: 'i need no password'}
+  const usernameField = dtl.getByLabelText(container, /username/i)
+  const passwordField = dtl.getByLabelText(container, /password/i)
+  usernameField.value = fakeUser.username
+  passwordField.value = fakeUser.password
+  const submitButton = dtl.getByText(container, /submit/i)
+  dtl.fireEvent.click(submitButton)
+  const submittedDataPre = await dtl.findByTestId(
+    container,
+    'submitted-data',
+    {},
+    {container},
+  )
+  const data = JSON.parse(submittedDataPre.textContent)
+  expect(data).toEqual(fakeUser)
+})
diff --git a/tests/jest.config.dom.js b/tests/jest.config.dom.js
@@ -0,0 +1,9 @@
+const path = require('path')
+const baseConfig = require('kcd-scripts/jest')
+
+module.exports = {
+  ...baseConfig,
+  rootDir: path.join(__dirname, '..'),
+  displayName: 'dom',
+  testEnvironment: 'jest-environment-jsdom',
+}
diff --git a/tests/jest.config.node.js b/tests/jest.config.node.js
@@ -0,0 +1,11 @@
+const path = require('path')
+const baseConfig = require('kcd-scripts/jest')
+
+module.exports = {
+  ...baseConfig,
+  rootDir: path.join(__dirname, '..'),
+  setupFilesAfterEnv: undefined,
+  displayName: 'node',
+  testEnvironment: 'jest-environment-node',
+  testMatch: ['**/__node_tests__/**.js'],
+}
