Switch integration tests from jest to mocha

Author: EnoahNetzach

packages/react-scripts/templates/kitchensink/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["latest"]
+}

packages/react-scripts/templates/kitchensink/.template.dependencies.json

@@ -1,5 +1,10 @@
 {
   "dependencies": {
-    "jsdom": "9.8.3"
+    "babel-preset-latest": "6.16.0",
+    "babel-register": "6.18.0",
+    "babel-polyfill": "6.20.0",
+    "chai": "3.5.0",
+    "jsdom": "9.8.3",
+    "mocha": "3.2.0"
   }
 }

packages/react-scripts/templates/kitchensink/integration/env.test.js

@@ -1,26 +1,24 @@
+import { expect } from 'chai'
 import initDOM from './initDOM'
 
-// eslint-disable-next-line no-undef
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
-
 describe('Integration', () => {
   describe('Environment variables', () => {
     it('NODE_PATH', async () => {
       const doc = await initDOM('node-path')
 
-      expect(doc.getElementById('feature-node-path').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-node-path').childElementCount).to.equal(4)
     })
 
     it('shell env variables', async () => {
       const doc = await initDOM('shell-env-variables')
 
-      expect(doc.getElementById('feature-shell-env-variables').textContent).toBe('fromtheshell.')
+      expect(doc.getElementById('feature-shell-env-variables').textContent).to.equal('fromtheshell.')
     })
 
     it('file env variables', async () => {
       const doc = await initDOM('file-env-variables')
 
-      expect(doc.getElementById('feature-file-env-variables').textContent).toBe('fromtheenvfile.')
+      expect(doc.getElementById('feature-file-env-variables').textContent).to.equal('fromtheenvfile.')
     })
   })
 })

packages/react-scripts/templates/kitchensink/integration/syntax.2.test.js

@@ -1,68 +1,96 @@
+import { expect } from 'chai'
 import initDOM from './initDOM'
 
-// eslint-disable-next-line no-undef
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
-
 describe('Integration', () => {
   describe('Language syntax', () => {
     it('array destructuring', async () => {
       const doc = await initDOM('array-destructuring')
 
-      expect(doc.getElementById('feature-array-destructuring').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-array-destructuring').childElementCount).to.equal(4)
     })
 
     it('array spread', async () => {
       const doc = await initDOM('array-spread')
 
-      expect(doc.getElementById('feature-array-spread').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-array-spread').childElementCount).to.equal(4)
     })
 
     it('async/await', async () => {
       const doc = await initDOM('async-await')
 
-      expect(doc.getElementById('feature-async-await').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-async-await').childElementCount).to.equal(4)
     })
 
     it('class properties', async () => {
       const doc = await initDOM('class-properties')
 
-      expect(doc.getElementById('feature-class-properties').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-class-properties').childElementCount).to.equal(4)
     })
 
     it('computed properties', async () => {
       const doc = await initDOM('computed-properties')
 
-      expect(doc.getElementById('feature-computed-properties').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-computed-properties').childElementCount).to.equal(4)
     })
 
     it('custom interpolation', async () => {
       const doc = await initDOM('custom-interpolation')
 
-      expect(doc.getElementById('feature-custom-interpolation').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-custom-interpolation').childElementCount).to.equal(4)
     })
 
     it('default parameters', async () => {
       const doc = await initDOM('default-parameters')
 
-      expect(doc.getElementById('feature-default-parameters').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-default-parameters').childElementCount).to.equal(4)
     })
 
     it('destructuring and await', async () => {
       const doc = await initDOM('destructuring-and-await')
 
-      expect(doc.getElementById('feature-destructuring-and-await').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-destructuring-and-await').childElementCount).to.equal(4)
     })
 
     it('generators', async () => {
       const doc = await initDOM('generators')
 
-      expect(doc.getElementById('feature-generators').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-generators').childElementCount).to.equal(4)
     })
 
     it('object destructuring', async () => {
       const doc = await initDOM('object-destructuring')
 
-      expect(doc.getElementById('feature-object-destructuring').childElementCount).toBe(4)
+      expect(doc.getElementById('feature-object-destructuring').childElementCount).to.equal(4)
+    })
+
+    it('object spread', async () => {
+      const doc = await initDOM('object-spread')
+
+      expect(doc.getElementById('feature-object-spread').childElementCount).to.equal(4)
+    })
+
+    it('promises', async () => {
+      const doc = await initDOM('promises')
+
+      expect(doc.getElementById('feature-promises').childElementCount).to.equal(4)
+    })
+
+    it('rest + default', async () => {
+      const doc = await initDOM('rest-and-default')
+
+      expect(doc.getElementById('feature-rest-and-default').childElementCount).to.equal(4)
+    })
+
+    it('rest parameters', async () => {
+      const doc = await initDOM('rest-parameters')
+
+      expect(doc.getElementById('feature-rest-parameters').childElementCount).to.equal(4)
+    })
+
+    it('template interpolation', async () => {
+      const doc = await initDOM('template-interpolation')
+
+      expect(doc.getElementById('feature-template-interpolation').childElementCount).to.equal(4)
     })
   })
 })

packages/react-scripts/templates/kitchensink/integration/syntax.1.test.js renamed to packages/react-scripts/templates/kitchensink/integration/syntax.test.js

@@ -1,46 +1,44 @@
+import { expect } from 'chai'
 import initDOM from './initDOM'
 
-// eslint-disable-next-line no-undef
-jasmine.DEFAULT_TIMEOUT_INTERVAL = 10000
-
 describe('Integration', () => {
   describe('Webpack plugins', () => {
     it('css inclusion', async () => {
       const doc = await initDOM('css-inclusion')
 
       expect(doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, ''))
-        .toMatch(/#feature-css-inclusion\{background:.+;color:.+}/)
+        .to.match(/#feature-css-inclusion\{background:.+;color:.+}/)
     })
 
     it('image inclusion', async () => {
       const doc = await initDOM('image-inclusion')
 
-      expect(doc.getElementById('feature-image-inclusion').src).toMatch(/^data:image\/jpeg;base64.+==$/)
+      expect(doc.getElementById('feature-image-inclusion').src).to.match(/^data:image\/jpeg;base64.+==$/)
     })
 
     it('no ext inclusion', async () => {
       const doc = await initDOM('no-ext-inclusion')
 
       expect(doc.getElementById('feature-no-ext-inclusion').textContent)
-        .toBe('This is just a file without an extension.')
+        .to.equal('This is just a file without an extension.')
     })
 
     it('json inclusion', async () => {
       const doc = await initDOM('json-inclusion')
 
-      expect(doc.getElementById('feature-json-inclusion').textContent).toBe('This is an abstract.')
+      expect(doc.getElementById('feature-json-inclusion').textContent).to.equal('This is an abstract.')
     })
 
     it('svg inclusion', async () => {
       const doc = await initDOM('svg-inclusion')
 
-      expect(doc.getElementById('feature-svg-inclusion').src).toMatch(/\/static\/media\/logo\..+\.svg$/)
+      expect(doc.getElementById('feature-svg-inclusion').src).to.match(/\/static\/media\/logo\..+\.svg$/)
     })
 
     it('unknown ext inclusion', async () => {
       const doc = await initDOM('unknown-ext-inclusion')
 
-      expect(doc.getElementById('feature-unknown-ext-inclusion').textContent).toBe('Whoooo, spooky!.')
+      expect(doc.getElementById('feature-unknown-ext-inclusion').textContent).to.equal('Whoooo, spooky!.')
     })
   })
 })

packages/react-scripts/templates/kitchensink/integration/webpack.test.js

@@ -170,13 +170,13 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log)
 E2E_URL="http://localhost:3001" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true NODE_PATH=src \
-  npm test -- --no-cache --testPathPattern="/integration/"
+  node node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.test.js
 
 # Test "production" environment
 E2E_FILE=./build/index.html \
   CI=true \
   NODE_PATH=src \
-  npm test -- --no-cache --testPathPattern="/integration/"
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
 
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap
@@ -197,6 +197,9 @@ npm link $root_path/packages/eslint-config-react-app
 npm link $root_path/packages/react-dev-utils
 npm link $root_path/packages/react-scripts
 
+# ...and we need  to remove template's .babelrc
+rm .babelrc
+
 # Test the build
 NODE_PATH=src REACT_APP_SHELL_ENV_MESSAGE=fromtheshell npm run build
 # Check for expected output
@@ -219,13 +222,15 @@ grep -q 'The app is running at:' <(tail -f $tmp_server_log)
 E2E_URL="http://localhost:3002" \
   REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \
   CI=true NODE_PATH=src \
-  npm test -- --no-cache --testPathPattern="/integration/"
+  NODE_ENV=production \
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
 
 # Test "production" environment
 E2E_FILE=./build/index.html \
   CI=true \
+  NODE_ENV=production \
   NODE_PATH=src \
-  npm test -- --no-cache --testPathPattern="/integration/"
+  node_modules/.bin/mocha --require babel-register --require babel-polyfill integration/*.js
 
 # Uncomment when snapshot testing is enabled by default:
 # test -e src/__snapshots__/App.test.js.snap