chore: update all packages and get 100% coverage (#118)

Author: Kent C. Dodds

jest.config.js

@@ -1,7 +1,10 @@
-const jestConfig = require('kcd-scripts/jest')
+const config = require('kcd-scripts/jest')
 
-module.exports = Object.assign(jestConfig, {
-  testEnvironment: 'jest-environment-node',
-  testURL: 'http://localhost/',
-  setupTestFrameworkScriptFile: '<rootDir>/setupTests.js',
-})
+module.exports = {
+  ...config,
+  projects: [
+    require.resolve('jest-watch-select-projects'),
+    require.resolve('./tests/jest.config.dom'),
+    require.resolve('./tests/jest.config.node'),
+  ],
+}

package.json

@@ -13,11 +13,14 @@
     "build": "kcd-scripts build",
     "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 build,lint,test:all",
-    "setup": "npm install && npm run validate -s",
-    "precommit": "kcd-scripts precommit"
+    "validate": "kcd-scripts validate",
+    "setup": "npm install && npm run validate -s"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "kcd-scripts pre-commit"
+    }
   },
   "files": [
     "dist",
@@ -33,18 +36,20 @@
   "author": "Ernesto Garcia <[email protected]> (http://gnapse.github.io/)",
   "license": "MIT",
   "dependencies": {
+    "@babel/runtime": "^7.5.1",
     "chalk": "^2.4.1",
     "css": "^2.2.3",
     "css.escape": "^1.5.1",
     "jest-diff": "^24.0.0",
     "jest-matcher-utils": "^24.0.0",
     "lodash": "^4.17.11",
     "pretty-format": "^24.0.0",
-    "redent": "^2.0.0"
+    "redent": "^3.0.0"
   },
   "devDependencies": {
+    "jest-watch-select-projects": "^0.1.2",
     "jsdom": "^15.1.0",
-    "kcd-scripts": "^0.44.0"
+    "kcd-scripts": "^1.4.0"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/to-be-in-the-document.js

@@ -1,5 +1,5 @@
-import document from './helpers/document'
 import {HtmlElementTypeError} from '../utils'
+import document from './helpers/document'
 
 test('.toBeInTheDocument', () => {
   document.body.innerHTML = `
@@ -33,10 +33,13 @@ test('.toBeInTheDocument', () => {
   expect(() => expect(fakeElement).toBeInTheDocument()).toThrowError(
     HtmlElementTypeError,
   )
+  expect(() => expect(nullElement).toBeInTheDocument()).toThrowError(
+    HtmlElementTypeError,
+  )
   expect(() => expect(undefinedElement).toBeInTheDocument()).toThrowError(
     HtmlElementTypeError,
   )
-  expect(() => expect(nullElement).toBeInTheDocument()).toThrowError(
+  expect(() => expect(undefinedElement).not.toBeInTheDocument()).toThrowError(
     HtmlElementTypeError,
   )
 })

src/__tests__/to-have-value.js

@@ -103,4 +103,86 @@ describe('.toHaveValue', () => {
       expect(queryByTestId('radio')).toHaveValue('')
     }).toThrow()
   })
+
+  test('throws when the expected input value does not match', () => {
+    const {container} = render(`<input data-testid="one" value="foo" />`)
+    const input = container.firstChild
+    let errorMessage
+    try {
+      expect(input).toHaveValue('something else')
+    } catch (error) {
+      errorMessage = error.message
+    }
+
+    expect(errorMessage).toMatchInlineSnapshot(`
+      "<dim>expect(</><red>element</><dim>).toHaveValue(</><green>something else</><dim>)</>
+
+      Expected the element to have value:
+      <green>  something else</>
+      Received:
+      <red>  foo</>"
+    `)
+  })
+
+  test('throws when using not but the expected input value does match', () => {
+    const {container} = render(`<input data-testid="one" value="foo" />`)
+    const input = container.firstChild
+    let errorMessage
+
+    try {
+      expect(input).not.toHaveValue('foo')
+    } catch (error) {
+      errorMessage = error.message
+    }
+    expect(errorMessage).toMatchInlineSnapshot(`
+      "<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>foo</><dim>)</>
+
+      Expected the element not to have value:
+      <green>  foo</>
+      Received:
+      <red>  foo</>"
+    `)
+  })
+
+  test('throws when the form has no a value but a value is expected', () => {
+    const {container} = render(`<input data-testid="one" />`)
+    const input = container.firstChild
+    let errorMessage
+
+    try {
+      expect(input).toHaveValue()
+    } catch (error) {
+      errorMessage = error.message
+    }
+    expect(errorMessage).toMatchInlineSnapshot(`
+      "<dim>expect(</><red>element</><dim>).toHaveValue(</><green>expected</><dim>)</>
+
+      Expected the element to have value:
+      <green>  (any)</>
+      Received:
+      "
+    `)
+  })
+
+  test('throws when the form has a value but none is expected', () => {
+    const {container} = render(`<input data-testid="one" value="foo" />`)
+    const input = container.firstChild
+    let errorMessage
+
+    try {
+      expect(input).not.toHaveValue()
+    } catch (error) {
+      errorMessage = error.message
+    }
+    expect(errorMessage).toMatchInlineSnapshot(`
+      "<dim>expect(</><red>element</><dim>).not.toHaveValue(</><green>expected</><dim>)</>
+
+      Expected the element not to have value:
+      <green>  (any)</>
+      Received:
+      <red>  foo</>"
+    `)
+  })
 })
+
+/* eslint max-lines-per-function:0 */

src/__tests__/utils.js

@@ -57,4 +57,19 @@ describe('checkHtmlElement', () => {
       checkHtmlElement(() => {}, () => {}, {})
     }).toThrow(HtmlElementTypeError)
   })
+
+  it('throws for almost element-like objects', () => {
+    class FakeObject {}
+    expect(() => {
+      checkHtmlElement(
+        {
+          ownerDocument: {
+            defaultView: {HTMLElement: FakeObject, SVGElement: FakeObject},
+          },
+        },
+        () => {},
+        {},
+      )
+    }).toThrow(HtmlElementTypeError)
+  })
 })

src/to-be-in-the-document.js

@@ -25,7 +25,7 @@ export function toBeInTheDocument(element) {
         '',
         receivedColor(`${stringify(element.ownerDocument.cloneNode(false))} ${
           this.isNot ? 'contains:' : 'does not contain:'
-        } ${stringify(element ? element.cloneNode(false) : element)}
+        } ${stringify(element.cloneNode(false))}
         `),
       ].join('\n')
     },

tests/jest.config.dom.js

@@ -0,0 +1,9 @@
+const path = require('path')
+const config = require('kcd-scripts/jest')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '..'),
+  displayName: 'jsdom',
+  testEnvironment: 'dom',
+  ...config,
+}

tests/jest.config.node.js

@@ -0,0 +1,9 @@
+const path = require('path')
+const config = require('kcd-scripts/jest')
+
+module.exports = {
+  rootDir: path.resolve(__dirname, '..'),
+  displayName: 'node',
+  testEnvironment: 'node',
+  ...config,
+}

setupTests.js renamed to tests/setup-env.js

@@ -1,4 +1,4 @@
 import {plugins} from 'pretty-format'
-import './src/extend-expect'
+import '../src/extend-expect'
 
 expect.addSnapshotSerializer(plugins.ConvertAnsi)