Use Jest for testing

ReactTraining · Jul 13, 2017 · 20fcf76 · 20fcf76
1 parent d44a7b5
commit 20fcf76
Show file tree

Hide file tree

Showing 7 changed files with 865 additions and 1,133 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,6 +2,4 @@ es
 node_modules
 umd
 /*.js
-!karma.conf.js
-!tests.webpack.js
 !webpack.config.js
diff --git a/karma.conf.js b/karma.conf.js
diff --git a/modules/__tests__/.eslintrc b/modules/__tests__/.eslintrc
@@ -1,5 +1,8 @@
 {
+  "plugins": [
+    "jest"
+  ],
   "env": {
-    "mocha": true
+    "jest/globals": true
   }
 }
diff --git a/modules/__tests__/Media-test.js b/modules/__tests__/Media-test.js
@@ -1,27 +1,43 @@
-import expect from 'expect'
 import React from 'react'
-import { render } from 'react-dom'
-import { renderToStaticMarkup } from 'react-dom/server'
+import ReactDOM from 'react-dom'
+import ReactDOMServer from 'react-dom/server'
 import Media from '../Media'
 
+const createMockMediaMatcher = (matches) => () => ({
+  matches,
+  addListener: () => {},
+  removeListener: () => {}
+})
+
 describe('A <Media>', () => {
+  let originalMatchMedia
+  beforeEach(() => {
+    originalMatchMedia = window.matchMedia
+  })
+
+  afterEach(() => {
+    window.matchMedia = originalMatchMedia
+  })
+
   let node
   beforeEach(() => {
     node = document.createElement('div')
   })
 
   describe('with a query that matches', () => {
-    const query = `(max-width: ${window.innerWidth}px)`
+    beforeEach(() => {
+      window.matchMedia = createMockMediaMatcher(true)
+    })
 
     describe('and a children element', () => {
       it('renders its child', () => {
         const element = (
-          <Media query={query}>
+          <Media query="">
             <div>hello</div>
           </Media>
         )
 
-        render(element, node, () => {
+        ReactDOM.render(element, node, () => {
           expect(node.firstChild.innerHTML).toMatch(/hello/)
         })
       })
@@ -30,14 +46,14 @@ describe('A <Media>', () => {
     describe('and a children function', () => {
       it('renders its child', () => {
         const element = (
-          <Media query={query}>
+          <Media query="">
             {matches => (
               matches ? <div>hello</div> : <div>goodbye</div>
             )}
           </Media>
         )
 
-        render(element, node, () => {
+        ReactDOM.render(element, node, () => {
           expect(node.firstChild.innerHTML).toMatch(/hello/)
         })
       })
@@ -46,116 +62,79 @@ describe('A <Media>', () => {
     describe('and a render function', () => {
       it('renders its child', () => {
         const element = (
-          <Media query={query} render={() => (
+          <Media query="" render={() => (
             <div>hello</div>
           )}/>
         )
 
-        render(element, node, () => {
+        ReactDOM.render(element, node, () => {
           expect(node.firstChild.innerHTML).toMatch(/hello/)
         })
       })
     })
-
-    describe('and an object query', () => {
-      it('renders its child', () => {
-        const query = { maxWidth: window.innerWidth }
-        const element = (
-          <Media query={query} render={() => (
-            <div>hello</div>
-          )}/>
-        )
-
-        render(element, node, () => {
-          expect(node.firstChild.innerHTML).toMatch(/hello/)
-        })
-      })
-    })
-
   })
 
   describe('with a query that does not match', () => {
-    const query = `(min-width: ${window.innerWidth + 1}px)`
+    beforeEach(() => {
+      window.matchMedia = createMockMediaMatcher(false)
+    })
 
     describe('and a children element', () => {
       it('renders its child', () => {
         const element = (
-          <Media query={query}>
+          <Media query="">
             <div>hello</div>
           </Media>
         )
 
-        render(element, node, () => {
-          expect(node.firstChild.innerHTML).toNotMatch(/hello/)
+        ReactDOM.render(element, node, () => {
+          expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
         })
       })
     })
 
     describe('and a children function', () => {
       it('renders its child', () => {
         const element = (
-          <Media query={query}>
+          <Media query="">
             {matches => (
               matches ? <div>hello</div> : <div>goodbye</div>
             )}
           </Media>
         )
 
-        render(element, node, () => {
+        ReactDOM.render(element, node, () => {
           expect(node.firstChild.innerHTML).toMatch(/goodbye/)
         })
       })
     })
 
     describe('and a render function', () => {
       it('does not render', () => {
-        const element = (
-          <Media query={query} render={() => (
-            <div>hello</div>
-          )}/>
-        )
-
-        render(element, node, () => {
-          expect(node.firstChild.innerHTML).toNotMatch(/hello/)
-        })
-      })
-
-      it('does not call the render function', () => {
         let renderWasCalled = false
         const element = (
-          <Media query={query} render={() => {
+          <Media query="" render={() => {
             renderWasCalled = true
-            return <div/>
+            return <div>hello</div>
           }}/>
         )
 
-        render(element, node, () => {
+        ReactDOM.render(element, node, () => {
+          expect(node.firstChild.innerHTML || '').not.toMatch(/hello/)
           expect(renderWasCalled).toBe(false)
         })
       })
     })
-
-    describe('and an object query', () => {
-      it('does not render its child', () => {
-        const query = { minWidth: window.innerWidth + 1 }
-        const element = (
-          <Media query={query} render={() => (
-            <div>hello</div>
-          )}/>
-        )
-
-        render(element, node, () => {
-          expect(node.firstChild.innerHTML).toNotMatch(/hello/)
-        })
-      })
-    })
-
   })
 
   describe('rendered on the server', () => {
+    beforeEach(() => {
+      window.matchMedia = createMockMediaMatcher(true)
+    })
+
     it('renders its child', () => {
-      const markup = renderToStaticMarkup(
-        <Media query="(min-width: 200px)">
+      const markup = ReactDOMServer.renderToStaticMarkup(
+        <Media query="">
           <div>hello</div>
         </Media>
       )

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "prepublish": "node ./tools/build.js",
     "release": "node ./tools/release.js",
     "lint": "eslint modules",
-    "test": "karma start --single-run"
+    "test": "jest"
   },
   "peerDependencies": {
     "react": ">=15 || ^0.14.7"
@@ -36,18 +36,11 @@
     "babel-preset-stage-1": "^6.5.0",
     "eslint": "^3.2.2",
     "eslint-plugin-import": "^2.0.0",
+    "eslint-plugin-jest": "^20.0.3",
     "eslint-plugin-react": "^6.0.0",
-    "expect": "^1.20.2",
     "gzip-size": "^3.0.0",
     "in-publish": "^2.0.0",
-    "karma": "^1.2.0",
-    "karma-browserstack-launcher": "^1.0.1",
-    "karma-chrome-launcher": "^1.0.1",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.1.0",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.1",
-    "mocha": "^3.0.0",
+    "jest": "^20.0.4",
     "pretty-bytes": "^4.0.2",
     "react": "^15.4.1 || ^0.14.7",
     "react-dom": "^15.3.0 || ^0.14.7",

diff --git a/tests.webpack.js b/tests.webpack.js