Unit test a React component (& reviews)

marmelab · Feb 29, 2016 · 5a1b725 · 5a1b725
1 parent 2271553
commit 5a1b725
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "co-body": "~4.0.0",
     "co-fs": "~1.2.0",
     "co-pg": "~1.3.1",
-    "compass-mixins": "^0.12.7",
+    "compass-mixins": "~0.12.7",
     "config": "~1.16.0",
     "css-loader": "~0.16.0",
     "db-migrate": "~0.10.0-beta.7",
@@ -87,8 +87,10 @@
     "babel-preset-react-hmre": "~1.1.0",
     "babel-preset-stage-0": "~6.3.13",
     "chai": "~3.3.0",
+    "chai-enzyme": "~0.4.1",
+    "cheerio": "~0.20.0",
     "co-mocha": "~1.1.2",
-    "enzyme": "~1.2.0",
+    "enzyme": "~2.0.0",
     "eslint": "~1.6.0",
     "eslint-config-airbnb": "~0.1.0",
     "eslint-plugin-mocha": "~1.0.0",

diff --git a/src/frontend/js/product/ProductItem.spec.js b/src/frontend/js/product/ProductItem.spec.js
@@ -0,0 +1,39 @@
+import chai, { assert } from 'chai';
+import { shallow } from 'enzyme';
+import chaiEnzyme from 'chai-enzyme';
+import React from 'react';
+
+import '../test/setupJsdom';
+import ProductItem from './ProductItem';
+
+chai.use(chaiEnzyme());
+
+describe('Component ProductItem', () => {
+    const props = {
+        id: 42,
+        price: 28.53,
+        reference: 'REF-654564',
+        thumbnail: 'http://google.fr/image.jpg',
+        description: 'Best product ever',
+    };
+
+    it('should display the correct reference', () => {
+        const wrapper = shallow(<ProductItem {...props} />);
+        assert.deepEqual(wrapper.find('h4').text(), 'REF-654564');
+    });
+
+    it('should display the correct price', () => {
+        const wrapper = shallow(<ProductItem {...props} />);
+        assert.deepEqual(wrapper.find('h6').text(), '$28.53');
+    });
+
+    it('should display the correct description', () => {
+        const wrapper = shallow(<ProductItem {...props} />);
+        assert.deepEqual(wrapper.find('p.card-text').text(), 'Best product ever');
+    });
+
+    it('should display the correct thumbnail', () => {
+        const wrapper = shallow(<ProductItem {...props} />);
+        assert.deepEqual(wrapper.find('img').node.props.src, 'http://google.fr/image.jpg');
+    });
+});
diff --git a/src/frontend/js/test/setupJsdom.js b/src/frontend/js/test/setupJsdom.js
@@ -0,0 +1,7 @@
+import jsdom from 'jsdom';
+
+global.document = jsdom.jsdom('<!doctype html><html><body></body></html>');
+global.window = document.defaultView;
+global.navigator = {
+    userAgent: 'node.js',
+};