Moving test suite to jest

package.json

@@ -5,9 +5,10 @@
   "repository": "https://github.com/quran/quran.com-frontend",
   "scripts": {
     "test": "npm run test:dev:unit",
-    "test:ci:unit": "karma start --browsers PhantomJS --single-run",
+    "test:ci:unit": "jest src",
     "pretest:ci:unit": "npm run test:ci:lint",
-    "test:dev:unit": "karma start",
+    "test:dev:unit": "jest src",
+    "jest": "jest",
     "test:ci:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:dev:lint": "./node_modules/eslint/bin/eslint.js ./src",
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
@@ -24,6 +25,12 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
+  "jest": {
+    "moduleDirectories": [
+      "node_modules",
+      "src"
+    ]
+  },
   "pre-commit": [
     "test:stylelint",
     "precommit"
@@ -162,6 +169,7 @@
     "@storybook/addon-links": "^3.2.13",
     "@storybook/react": "^3.2.13",
     "babel-eslint": "7.1.1",
+    "babel-jest": "^21.2.0",
     "babel-plugin-react-transform": "2.0.2",
     "babel-preset-react-hmre": "1.1.1",
     "chai": "3.0.0",
@@ -175,19 +183,8 @@
     "eslint-plugin-jsx-a11y": "2.2.3",
     "eslint-plugin-mocha": "4.8.0",
     "eslint-plugin-react": "6.8.0",
+    "jest": "^21.2.1",
     "jscs": "2.1.1",
-    "karma": "1.3.0",
-    "karma-chai": "0.1.0",
-    "karma-chai-sinon": "0.1.5",
-    "karma-chrome-launcher": "0.2.0",
-    "karma-intl-shim": "1.0.3",
-    "karma-junit-reporter": "0.3.4",
-    "karma-mocha": "0.2.0",
-    "karma-phantomjs-launcher": "~1.0.2",
-    "karma-script-launcher": "~0.1.0",
-    "karma-sinon": "1.0.4",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "1.8.0",
     "lint-staged": "^3.4.0",
     "mocha": "2.2.5",
     "nodemon": "1.7.1",

src/components/Audioplayer/ScrollButton/spec.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
-
+import sinon from 'sinon';
 import ScrollButton from './index';
 
 let makeComponent;
@@ -13,26 +13,25 @@ describe('<ScrollButton />', () => {
       onScrollToggle = sinon.stub();
 
       component = mount(
-        <ScrollButton shouldScroll={shouldScroll} onScrollToggle={onScrollToggle} />
+        <ScrollButton
+          shouldScroll={shouldScroll}
+          onScrollToggle={onScrollToggle}
+        />
       );
     };
   });
 
-  it('should indicate that shouldScroll', () => {
-    makeComponent(true);
-
-    expect(component.find('a').first().props().className).to.contain('scroll');
-  });
-
   it('should not indicate that shouldScroll', () => {
     makeComponent(false);
 
-    expect(component.find('a').first().props().className).not.to.contain('scroll');
+    expect(component.find('a').first().props().className).not.toContain(
+      'scroll'
+    );
   });
 
   it('should call onScrollToggle when clicked', () => {
     component.find('a').first().simulate('click');
 
-    expect(onScrollToggle).to.have.been.called; // eslint-disable-line
+    expect(onScrollToggle.callCount).toEqual(1);
   });
 });